Question

我想循环显示最后一张图片后它返回第一张图片的幻灯片。我制作了一个包含5个不同图像的幻灯片div，它会在x个时间后淡入淡出，但循环部分对我不起作用。谢谢你的帮助！

HTML：

<div id="slideshow2">
    <img class="slider1" src="images/car1.jpg"></img>
    <img class="slider2" src="images/car2.jpg"></img>
    <img class="slider3" src="images/car3.jpg"></img>
    <img class="slider4" src="images/car4.jpg"></img>
    <img class="slider5" src="images/car5.jpg"></img>
</div>

CSS：

#slideshow2{
    width: 600px;
    height: 400px;
    background: black;
    position: relative;
    margin: 0 auto;
}

.slider1, .slider2, .slider3, .slider4, .slider5{
    opacity: 0;
    position: absolute;
}

Jquery的：

    $(".slider1").animate({"opacity":"1"});
    $(".slider2").delay( 1500);
    $(".slider1").animate({"opacity":"0"});
    $(".slider2").animate({"opacity":"1"});
    $(".slider3").delay( 3000);
    $(".slider2").animate({"opacity":"0"});
    $(".slider3").animate({"opacity":"1"});
    $(".slider4").delay( 4500);
    $(".slider3").animate({"opacity":"0"});
    $(".slider4").animate({"opacity":"1"});
    $(".slider5").delay( 6000);
    $(".slider4").animate({"opacity":"0"});
    $(".slider5").animate({"opacity":"1"});
    $(".slider1").delay( 6000);
    $(".slider5").animate({"opacity":"0"});

Answer 1

在最后一个动画上添加回调功能

$(".slider5").animate({"opacity":"0"}, slideshow);

Answer 2

使用最后一张幻灯片上的回调。

$(".slider5").animate({"opacity":"1"}, function(){
    $(".slider5").animate({"opacity":"0"});
    slideshow();
});

http://api.jquery.com/animate/

（或15000个幻灯片库中的任何一个！）

Answer 3

将该函数添加为最后一个animate的回调。您还应该删除延迟，并将函数作为回调消除，如下所示：

function slideshow(){
   $(".slider1").animate({"opacity":"1"}, 1000, function() {
       $(".slider1").animate({"opacity":"0"}, 500);
       $(".slider2").animate({"opacity":"1"}, 1000, function() {
           $(".slider2").animate({"opacity":"0"}, 500);
           $(".slider3").animate({"opacity":"1"}, 1000, function() {
               $(".slider3").animate({"opacity":"0"}, 500);
               $(".slider4").animate({"opacity":"1"}, 1000, function() {
                   $(".slider4").animate({"opacity":"0"}, 500);
                   $(".slider5").animate({"opacity":"1"}, 1000, function() {
                       $(".slider5").animate({"opacity":"0"}, 500);
                       slideshow();
                    });
                });
            });
        });
    });
}

slideshow();

或者只是使用幻灯片插件： http://vandelaydesign.com/blog/web-development/jquery-slideshow/

Answer 4

This should work:

它将每1.5秒运行一次该功能。您可以在setInterval

上更改它

setInterval(function() {
    slideshow();
}, 1500);

var currentSlideId = 0;

function slideshow() {
    currentSlide = $("img", "#slideshow2").eq(currentSlideId);

    nextSlide = currentSlide.next();

    if( !nextSlide.length )
        nextSlide = $("img", "#slideshow2").eq(0);

    currentSlide.animate({"opacity":"0"}, 500, function() {
        nextSlide.animate({"opacity":"1"}, 500);

        currentSlideId = nextSlide.index();
    });
}

如何让我的幻灯片循环？

4 个答案: