Javascript 幻灯片结束时，从第一张图像重新开始_Javascript_Jquery

Javascript 幻灯片结束时，从第一张图像重新开始

javascript jquery

Javascript 幻灯片结束时，从第一张图像重新开始,javascript,jquery,Javascript,Jquery,当我的幻灯片到达终点时，它停止。我试图让它重新开始，但无法实现。我希望有人能帮我归档，以我的代码为基础。我按照som教程介绍了如何使用JQuery创建图像滑块，因此我不想离开我编写的代码（如果可能的话）。到目前为止，我找到的解决方案都是用完全不同的想法编写的。以下是html代码： <body style="background-color: lightblue"> <div> <div id="slider" style="margin-left: aut

当我的幻灯片到达终点时，它停止。我试图让它重新开始，但无法实现。我希望有人能帮我归档，以我的代码为基础。我按照som教程介绍了如何使用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>

因此，我的问题是如何编写代码，以便幻灯片在到达最后一张图像时重新开始。最好保持JQuery语法

提前感谢

试试这把小提琴，看看它是否有用：

当

$current

的长度为零时，我修改了

$next

的赋值，如下所示：

$next=$（“#滑块：第一个子项”）
我在结尾处更改了动画
块，以使用对$next
的引用，而不是您使用的选择器
$next.animate({opacity: 1.0}, 2000, function() {
    $next.addClass('active').css({zIndex: 1});
});

希望有帮助
另外，我不确定你打算如何初始化整个东西，因此小提琴开始时所有3幅图像都可见——点击开始幻灯片链接几次将使你进入一个应该能够循环浏览的状态
我没有你的CSS用于class。active
，但也许你只是将其用作标记。
这是对我有效的完整代码，你可能需要稍微调整一下计时：
我用了大卫的小费
$(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});
});

}
我还为不希望在开始时显示的图像添加了不透明度：0。上述代码在到达最后一幅图像后从开始旋转时起作用。但是，当我开始幻灯片放映时，它首先从最后一张图像开始，停留3秒钟，然后切换到队列中第二张图像，停留1秒钟，再次回到最后一张图像，停留1秒钟，然后开始正常工作。由于某种原因，我无法调试它。当我点击F11（进入）时，它就退出了。知道为什么吗？谢谢你到目前为止的帮助。你是用我的纯溶液，还是在你身边添加了其他东西？不知道为什么它不允许你介入。我用了你的纯溶液。但我现在可以用了。我将animate（）代码中的部分拆分如下：next.addClass（'active'）；动画（{opacity:1.0}，2500）；然后出于某种原因它起了作用。谢谢你的帮助。.active到目前为止没有任何css
$(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});
});