javascript - 我的幻灯片只循环播放一张照片

Question

我正在尝试使用 jQuery 设计幻灯片，我想出了下面的代码，但是，当我运行它时，它只循环播放一张幻灯片，然后停止做任何进一步的事情。如何让图片循环显示？

jQuery:

$(function() {
    setInterval("rotateImages()", 3000);
});
function rotateImages() {
    var CurrentPhoto = $('#slideshow .current');
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length == 0) {
        NextPhoto = $('#slideshow div:first');
    }  
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({ opacity: 0.0 }).addClass('current')
         .animate({ opacity: 1.0 }, 1000,
    function() {
         CurrentPhoto.removeClass('previous');
    }
}

HTML:

                <div id="slideshow">          
            <div class="current"><img src="image1.jpg" alt="Img" height="382" width="594"> </div>
            <div><img src="image2.jpg" alt="Img" height="382" width="594">             </div>
            <div><img src="image3.jpg" alt="Img" height="382" width="594"></div>
            <div><img src="image4.jpg" alt="Img" height="382" width="594"></div>
            <div><img src="image5.jpg" alt="Img" height="382" width="594"></div>
            </div>

...

CSS:

#slideshow div {
    z-index: 0;
    position: absolute;
    margin: 0px 0px 0px 362px;
}
#slideshow div.previous {
    z-index: 1;
}
#slideshow div.current {
    z-index: 2;
}

Answer 1

脚本中有两个错误:

1. 缺少用于关闭 animate 函数的括号(您可以在 JavaScript 控制台中轻松看到的内容)。
2. NextPhoto == 0 不正确。您想检查 NextPhoto 的长度是否为 0，而不是 NextPhoto 本身。

解决这两件事，问题就解决了:

$(function() {
    setInterval("rotateImages()", 3000);
});
function rotateImages() {
    var CurrentPhoto = $('#slideshow .current');
    var NextPhoto = CurrentPhoto.next();
    if (NextPhoto.length == 0) {
        NextPhoto = $('#slideshow div:first');
    }  
    CurrentPhoto.removeClass('current').addClass('previous');
    NextPhoto.css({ opacity: 0.0 }).addClass('current')
             .animate({ opacity: 1.0 }, 
                      1000,
                      function() {
                          CurrentPhoto.removeClass('previous');
                      });
}

在这个 JSFiddle 上查看:http://jsfiddle.net/h7afu5ex/