I’m trying to find a way of playing a cycle of images and hyperlinks via JS or CSS (not sure which would work), in a similar fashion to how a GIF animation functions.
I would ordinarily use a GIF for something like this, but I’m wanting to randomise the order the images are shown with each page refresh (plus I wouldn’t know how to have different hyperlinks for specific frames in a GIF).
Thank you very much, I hope this makes sense
You can do something like this with JavaScript:
var index=0;
var images = document.getElementsByClassName("slideshow");
function changeBanner() {
[].forEach.call(images, function (v,i) {
images[i].hidden = i!==index
});
index = (index+1) % images.length;
}
window.onload = function() {
setInterval(changeBanner, 1000)
};
And your HTML looks like this:
<img src="1.png" width="640px" height="480px" class="slideshow" />
<img src="2.png" width="640px" height="480px" class="slideshow" />
<img src="3.png" width="640px" height="480px" class="slideshow" />
<img src="4.png" width="640px" height="480px" class="slideshow" />
This increments i each second, and removes the hidden attribute from the <img> element with the src of i.png.
document.images or if that is not deemed necessary, declare a variable to refer to document.images instead of referring directly to document.images 3 separate times.
Math.random to call a random index from an array?