当我的图像幻灯片到达末尾时,它停止了。我试图使它重新开始,但无法实现。我希望有人可以帮助我实现这一目标,并以我的代码为基础。我遵循了有关如何使用JQuery创建图像滑块的som教程,所以我不想离开我编写的代码(如果可能的话)。到目前为止,我发现的解决方案是用完全不同的想法编写的。
这是html代码:

<body style="background-color: lightblue">
<div>
    <div id="slider" style="margin-left: auto; margin-right: auto; width: 800px; height: 800px; margin-top: 100px;">
        <img src="./images/Dogs.jpg" style="position: absolute;" class="active" />
        <img src="./images/pic.jpg" style="position: absolute;" />
        <img src="./images/Mal.jpg" style="position: absolute;" />

    </div>
</div>




这是JS代码:

function startSlide() {
    var $current = $('div #slider img.active');
    var $next = $current.next();

    if($current.length == 0) {
        $next = $('#slider  div:first-child');
        //This is what where the code will go I guess
    }

//  $next.addClass('active');
    $current.removeClass('active').css({
        "opacity" : 0.0,
        "zIndex" : 2
        });
        $("#slider img").animate({opacity: 1.0}, 2000, function() {
            $next.addClass('active').css({zIndex: 1});
        });
}


所以我的问题是如何编写代码,以便幻灯片在到达最后一张图片后重新开始。并且最好保留JQuery语法
提前致谢

最佳答案

尝试摆弄一下,看看是否有帮助:http://jsfiddle.net/eNuwv/2/

$next的长度为零时,我修改了$current的分配,如下所示:

$next = $('#slider :first-child');

我在最后更改了animate块,以使用对$next的引用而不是您使用的选择器。

$next.animate({opacity: 1.0}, 2000, function() {
    $next.addClass('active').css({zIndex: 1});
});


希望能有所帮助。

ps。我不确定您打算如何初始化整个过程,因此小提琴将以所有3张图像开始显示-几次单击“开始幻灯片”链接将使您进入一种可以循环浏览的状态。

我没有用于类.active的CSS,但也许您只是将其用作标记。

07-24 09:50
查看更多