gpt4 book ai didi

javascript - 当幻灯片到达末尾时从第一张图像开始

转载 作者:行者123 更新时间:2023-12-02 18:28:22 25 4
gpt4 key购买 nike

当我的图像幻灯片到达末尾时,它停止了。我试图让它重新开始,但无法实现。我希望有人可以帮助我以我的代码为基础来实现这一目标。我遵循了一些有关如何使用 JQuery 创建图像 slider 的教程,因此我不想放弃我编写的代码(如果可能的话)。到目前为止我发现的解决方案是用完全不同的想法编写的。这是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 语法提前致谢

最佳答案

尝试一下这个 fiddle ,看看是否有帮助:http://jsfiddle.net/eNuwv/2/

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

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

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

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

希望有帮助。

ps。我不确定您打算如何初始化整个事情,因此 fiddle 从所有 3 个图像可见开始 - 单击“开始幻灯片”链接几次将使您进入应该能够循环浏览的状态。

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

关于javascript - 当幻灯片到达末尾时从第一张图像开始,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18110016/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com