JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<pre><b>::</b> Thumbnail Image Animator</pre>
<button id="appendButton">append more items</button>
<div id= "InsertHere" class="InsertHere"></div>

CSS

.hrml .body {
  padding: 20;
}
.InsertHere {
  padding: 60px;
  position: fixed;
  text-align: center;
  font-family: Courier;
  font-size: 8pt;
  font-weight: bold;
}

JavaScript

document.getElementById("appendButton").onclick = function () {
  var imgAnimate = new imgAnimation(tumbImgList, 800, InsertHere);
};
function imgAnimation(animArray, speed, DOMtarget) {
  var currentFrame = 0;
	for(var i = 0; i < animArray.length; i++) {
		animArray[i] = animArray[i].replace(/ /g,"&nbsp;");
		animArray[i] = "<img src='" + animArray[i] + "'>";
	}
	DOMtarget.innerHTML = animArray[0];
	currentFrame++;
	this.animation = setInterval(function() {
		DOMtarget.innerHTML = animArray[currentFrame];
		currentFrame++;
		if(currentFrame >= animArray.length) currentFrame = 0;
	}, speed);
	this.getCurrentFrame = function() {
		return currentFrame;
	}
}

imgAnimation.prototype.stopAnimation = function() {
	clearInterval(this.animation);
}

function makeDiv() { return document.createElement("div"); }
function bodyAppend(element) { document.body.appendChild(element); }

var thmbScrollDiv = makeDiv();
thmbScrollDiv.style.height = "100%";
bodyAppend(thmbScrollDiv);
var tumbImgList = [
  "http://192.168.0.104/img_01.png",
  "http://192.168.0.104/img_02.png",
  "http://192.168.0.104/img_03.png",
  "http://192.168.0.104/img_04.png",
];