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/

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

1 个答案: