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

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

您的脚本中有两个错误：

缺少括号（您可以在 JavaScript 控制台中轻松看到）来关闭 animate 函数。
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/

Answer 2

 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');
    });
};

$(function() {
    setInterval(rotateImages, 3000);
});

我改变了一些东西 1. setinterval中的函数调用 2. 把函数声明移到上面然后引用那个函数 3. rotateImages 函数末尾的大括号完成

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

My slideshow only cycles through one picture

html

javascript

css

jquery

slideshow