javascript - 为什么这个函数不无限循环呢？

Question

我对 jQuery 很陌生，已经为幻灯片开发了这段代码。但似乎这段代码无助于无限循环。它运行一次然后停止。谁能详细说明一下原因吗？

$(document).ready(function(){
    //Initialization
    var slideCount = $('#slideshow').children().length;
    var currentID = 1;
    $('.slides').css('display','none');
    $('#slide' + currentID).fadeIn(1000);
    //Processing
    setInterval(function(){
        var nextID = currentID + 1;
        $('#slide' + currentID).fadeOut(1000);
        $('#slide' + nextID).fadeIn(1000);
        currentID = nextID;
        if(currentID == slideCount)
        {
            currentID = 1;
        }
    },2000);
});

幻灯片的 HTML 布局如下:

    <div id="slideshow">
        <img src="../../resources/images/image1.jpg" id="slide1" class="slides" />
        <img src="../../resources/images/image2.jpg" id="slide2" class="slides" />
        <img src="../../resources/images/image3.jpg" id="slide3" class="slides" />
        <img src="../../resources/images/image4.jpg" id="slide4" class="slides" />
    </div>

Answer 1

你的代码确实会永远循环。然而你可能想改变

var nextID = currentID + 1;
// nextID becomes 5, which doesn't exists
$('#slide' + currentID).fadeOut(1000);
$('#slide' + nextID).fadeIn(1000);
currentID = nextID;
if(currentID == slideCount)
{
    currentID = 1;
}

进入

var nextID = currentID + 1;
if (nextID > slideCount) 
{
    nextID = 1;
}
$('#slide' + currentID).fadeOut(1000);
$('#slide' + nextID).fadeIn(1000);
currentID = nextID;

参见 jsFiddle: http://jsfiddle.net/LjTXZ/