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函数结束时完成大括号

我的幻灯片只循环显示一张图片

2 个答案: