Суть такая. Просто жму на кнопку "next", запускается цикл, цикл перебирает элементы. Если находит элемент с z-index равным 10, то у самого элемента меняет его на 0, а у следующего за ним ставит z-index равным 10. То есть просто банальная переключалка друг за другом. Но почему не получается по кругу, то есть когда доходит до последнего элемента (и если у него z - index равен 10) то у себя ставит 1, а у первого 10) что бы заново запустить круг. Мой код работает до последнего а дальше ошибка, подскажите почему?
var slider = document.querySelectorAll("article");
var count = slider.length - 1;
function next(){
for(var i = 0; i < slider.length; i++){
if(slider[i].style.zIndex === "10"){
slider[i].style.zIndex = 1;
slider[i + 1].style.zIndex = 10;
setTimeout(function(){
slider[i].style.zIndex = 0;
}, 1000);
break;
}else if(slider[i].style.zIndex === "10" && i === count){
slider[i].style.zIndex = 1;
slider[0].style.zIndex = 10;
setTimeout(function(){
slider[i].style.zIndex = 0;
}, 1000);
break;
}
}
}
<div style="margin: 10px auto; width:1216px; height: 400px; text-align: center;">
<div style="width: 960px; display: inline-block; height: 400px; position: relative;">
<article style="width:960px; height: 400px; position: absolute; background-color: red; z-index: 10;"></article>
<article style="width:960px; height: 400px; position: absolute; background-color: green; z-index: 0;"></article>
<article style="width:960px; height: 400px; position: absolute; background-color: blue; z-index: 0;"></article>
<article style="width:960px; height: 400px; position: absolute; background-color: black; z-index: 0;"></article>
<article style="width:960px; height: 400px; position: absolute; background-color: orange; z-index: 0;"></article>
<div onclick="next()" style="left:1000px; position: absolute; top: 180px; background-color: red; height: 68px; width: 68px;">Next</div>
</div>
</div>