0

当我在图像中的幻灯片到达末尾时，它会停止。我试图让它重新开始，但不能让它发生。我希望有人可以帮助我归档这个，以我的代码为基础。我遵循了一些关于如何使用 JQuery 创建图像滑块的教程，所以我不想离开我编写的代码（如果可能的话）。到目前为止，我发现的解决方案是用完全不同的想法编写的。这是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 语法提前谢谢

4

2 回答 2

1

这是对我有用的完整代码，您可能不得不稍微调整一下时间：

我用了大卫的小费。

$(document).ready(function(){
    setInterval(function(){startSlide()}, 2100);
});

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

    if($next.length == 0) {
        $next = $('#slider :first-child');
    //make sure you don't make an empty circle
}
$current.removeClass('active');
$current.css({
    "opacity" : "0.0",
    "zIndex" : "2"
});
$next.animate({opacity: 1.0}, 2000, function() {
    $next.addClass('active').css({zIndex: 1});
});

}

我还在开始时不想显示的图像中添加了 opacity:0。

于 2013-08-07T19:18:22.397 回答
1

试试这个小提琴，看看它是否有帮助：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});
});

希望有帮助。

附言。我不确定您打算如何初始化整个事物，因此小提琴从所有 3 个可见的图像开始 - 单击 Start Slide 链接几次将使您进入应该能够循环浏览的状态。

我没有你的 CSS 类.active，但也许你只是将​​它用作标记。

于 2013-08-07T18:52:10.507 回答