SetInterval to do carousel. Two similar snippet, one is right, the other is wrong. Why?

Question

I am doing a carousel sample using JavaScript. Is there any difference between

        index++;
        index == imgList.length && (index = 0);
        show(index);

and

    index++;
    show(index);
    index == imgList.length - 1 && (index = -1);

Because the code above can work,code below cannot. Here is all the code:

 window.onload = function() { var numList = document.getElementById("numbers").getElementsByTagName("li"); var imgList = document.getElementById("imgs").getElementsByTagName("li"); var containBox = document.getElementById("box"); var index = 0; var timer = play = null; for (var i = 0; i < numList.length; i++) { numList[i].index = i; numList[i].onmouseover = function() { clearInterval(timer); show(this.index); }; } function show(a) { index = a; var opacity = 0; for (var i = 0; i < imgList.length; i++) { imgList[i].style.opacity = 0; } for (var i = 0; i < numList.length; i++) numList[i].className = ""; numList[index].className = "current"; timer = setInterval(function() { opacity += 2; imgList[index].style.opacity = opacity / 100; opacity == 100 && clearTimeout(timer); }, 20); } function autoPlay() { play = setInterval(function() { index++; show(index); index == imgList.length - 1 && (index = -1); // index++; // index == imgList.length && (index = 0); // show(index); }, 2000); } autoPlay(); containBox.onmouseover = function() { clearInterval(play); } containBox.onmouseout = function() { autoPlay(); } } 

 #box { width: 445px; margin: 0 auto; position: relative; } ul, li { padding: 0; margin: 0; } li { list-style-type: none; } #imgs { position: relative; } #imgs li { position: absolute; top: 0; left: 0; } #imgs img { width: 440px; height: 220px; } #numbers { position: absolute; right: 15px; top: 190px; } #numbers li { display: inline-block; background-color: #F90; width: 20px; height: 20px; border-radius: 20px; color: rgb(232, 227, 227); text-align: center; font-size: 12px; line-height: 20px; } #numbers .current { color: white; background-color: #f60; } #imgs li { opacity: 0; } #imgs .current { opacity: 1; } 

 <div id="box"> <ul id="imgs"> <li class="current"><img src="01.jpg" alt="01.jpg">1</li> <li><img src="02.jpg" alt="02.jpg">2</li> <li><img src="03.jpg" alt="03.jpg">3</li> <li><img src="04.jpg" alt="04.jpg">4</li> <li><img src="05.jpg" alt="05.jpg">5</li> </ul> <ul id="numbers"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> 

When I code below, I debug in chrome devtools finding that when the index first became 4 in line index = a , then got error. I have been working on it for three hours. Help！

Answer 1

You need to set your index back to 0 so that it can loop back

function autoPlay() {
    play = setInterval(function() {
        index = index > 4 ? index +1 : 0;
        show(index);
    }, 2000);
}
autoPlay();

 window.onload = function() { var numList = document.getElementById("numbers").getElementsByTagName("li"); var imgList = document.getElementById("imgs").getElementsByTagName("li"); var containBox = document.getElementById("box"); var index = 0; var timer = play = null; for (var i = 0; i < numList.length; i++) { numList[i].index = i; numList[i].onmouseover = function() { clearInterval(timer); show(this.index); }; } function show(a) { index = a; var opacity = 0; for (var i = 0; i < imgList.length; i++) { imgList[i].style.opacity = 0; } for (var i = 0; i < numList.length; i++) numList[i].className = ""; numList[index].className = "current"; timer = setInterval(function() { opacity += 2; imgList[index].style.opacity = opacity / 100; opacity == 100 && clearTimeout(timer); }, 20); } function autoPlay() { play = setInterval(function() { index = index < 4? index+1 : 0; show(index); }, 2000); } autoPlay(); containBox.onmouseover = function() { clearInterval(play); } containBox.onmouseout = function() { autoPlay(); } } 

 #box { width: 445px; margin: 0 auto; position: relative; } ul, li { padding: 0; margin: 0; } li { list-style-type: none; } #imgs { position: relative; } #imgs li { position: absolute; top: 0; left: 0; } #imgs img { width: 440px; height: 220px; } #numbers { position: absolute; right: 15px; top: 190px; } #numbers li { display: inline-block; background-color: #F90; width: 20px; height: 20px; border-radius: 20px; color: rgb(232, 227, 227); text-align: center; font-size: 12px; line-height: 20px; } #numbers .current { color: white; background-color: #f60; } #imgs li { opacity: 0; } #imgs .current { opacity: 1; } 

 <div id="box"> <ul id="imgs"> <li class="current"><img src="01.jpg" alt="01.jpg">1</li> <li><img src="02.jpg" alt="02.jpg">2</li> <li><img src="03.jpg" alt="03.jpg">3</li> <li><img src="04.jpg" alt="04.jpg">4</li> <li><img src="05.jpg" alt="05.jpg">5</li> </ul> <ul id="numbers"> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div>