为什么这个函数没有无限循环？

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/