为什么这个函数不能无限循环

Why doesn't this function loop infinitely?

本文关键字：不能 无限循环 函数 为什么      更新时间：2023-09-26

我对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>

你的代码会永远循环。你可能想改变

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/

相关文章：