I've been attempting to create a slideshow using only JavaScript, but I've run into an issue. When I set the divs to change on click, it works perfectly fine. However, when I try to set it to change at specific intervals, it doesn't work.
var numSlide = 0, currentSlide=0;
var slides = new Array;
function slideShow(){
img = document.getElementsByClassName("slideDesign");
for (i=0; i < img.length; i++){
slides[numSlide]=img[i];
if (numSlide == 0){
img[i].style.zIndex ="4";
}
else{
img[i].style.display = "0";
}
img[i].onclick = slideCheck;
numSlide++;
}
}
function slideCheck(){
slides[currentSlide].style.zIndex="0";
currentSlide++;
if(currentSlide >= numSlide){
currentSlide = 0;
}
slides[currentSlide].style.zIndex= "4";
}
window.onload = slideShow;.slideDesign{
width: 100%;
height:400px;
max-height:800px;
position: absolute;
top:0;
transition: z-index 1s;
}
#div1{
background-color:black;
}
#div2{
background-color:red;
}
#div3{
background-color:blue;
}
#div4{
background-color:green;
}
#div5{
background-color:cyan;
}<!DOCTYPE HTML5>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="slideShow">
<div id="div1" class="slideDesign"></div>
<div id="div2" class="slideDesign"></div>
<div id="div3" class="slideDesign"></div>
<div id="div4" class="slideDesign"></div>
<div id="div5" class="slideDesign"></div>
</div>
</body>
</html>In the JavaScript code, just before the end of the slideShow function, I can call the slideCheck function by clicking on the div and the div changes accordingly. But if I change that line to window.setInterval("slideCheck();", 3000), it just doesn't work and I can't figure out why.