I'm attempting to create a setup that cycles through different images
<div id="img_box" class="shadow" onload="imgCycle(1)";>
<img id="1" class='opaque imgbox selected' src="media/imgbox/chem.jpg" />
<img id="2" class='imgbox' src="media/imgbox/art.jpg" />
<img id="3" class='imgbox' src="media/imgbox/business.jpg" />
<img id="4" class='imgbox' src="media/imgbox/chess.jpg" />
</div>
by executing a function that removes the styles from all these images
function clearActiveImage(){
document.getElementById(1).className = "imgbox";
document.getElementById(2).className = "imgbox";
document.getElementById(3).className = "imgbox";
document.getElementById(4).className = "imgbox";
}
function imgCycle(x) {
if ( x == undefined ) { x = 1; }
clearActiveImage();
document.getElementById(x).className = "opaque imgbox selected";
x = x + 1;
if ( x >= 4) { x = 1; };
setInterval(imgCycle(x), 4000);
return;
};
then it increments a counter, and calls itself again after 4 seconds with the new counter. If the counter reaches 4, it should go back to 1.
I have implemented some css code that only displays the image with the opaque and selected classes.
#img_box img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#img_box img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
}
The page loads without any issues, but I'm struggling to make this feature work as intended.