Here is an example of an image element that keeps getting new images by JavaScript
imgcar.html
<!doctype html>
<html>
<head>
<title>NMLs JS Ravings</title>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<script>
'use script';
let sroll = function() {
let i = 0;
let imgs = [];
let img = new Image();
img.src = '../../graphics/p0.png';
imgs.push(img);
img = new Image();
img.src = '../../graphics/p1.png';
imgs.push(img);
img = new Image();
img.src = '../../graphics/p2.png';
imgs.push(img);
img = new Image();
img.src = '../../graphics/p9.png';
imgs.push(img);
let rev = setInterval(function() {
document.getElementById('id1').src = imgs[i % imgs.length].src;
i++;
console.log(i + ':' + i % imgs.length);
}, 1000
);
}
window.addEventListener('load', sroll);
</script>
</head>
<body>
<div><img id='id1' src='../../graphics/p9.png' alt='test'/></div>
</body>
</html>
Here is an example of an image carousel by JavaScript
imgcar1.html
<!doctype html>
<html>
<head>
<title>NMLs JS Ravings</title>
<meta charset='utf-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<script>
'use script';
let sroll = function() {
let rev = setInterval(function() {
let carousel = document.getElementById('carousel');
if (carousel.firstChild) {
let obj = carousel.firstChild;
carousel.removeChild(obj);
carousel.appendChild(obj);
}
}, 100
);
}
window.addEventListener('load', sroll);
</script>
</head>
<body>
<div id='carousel'>
<img id='id0' src='../../graphics/p0.png' alt='test'/>
<img id='id1' src='../../graphics/p1.png' alt='test'/>
<img id='id2' src='../../graphics/p2.png' alt='test'/>
<img id='id3' src='../../graphics/p3.png' alt='test'/>
<img id='id4' src='../../graphics/p4.png' alt='test'/>
<img id='id5' src='../../graphics/p5.png' alt='test'/>
<img id='id6' src='../../graphics/p6.png' alt='test'/>
<img id='id7' src='../../graphics/p7.png' alt='test'/>
<img id='id8' src='../../graphics/p8.png' alt='test'/>
<img id='id9' src='../../graphics/p9.png' alt='test'/>
</div>
</body>
</html>