gpt4 book ai didi

jQuery 无限轮播 : Slide # 2 replaced by Slide # 3 on first iteration

转载 作者:太空宇宙 更新时间:2023-11-04 00:09:29 26 4
gpt4 key购买 nike

我正在构建一个无限的 jQuery 轮播。无限是它在向用户显示最终幻灯片后立即显示第一张幻灯片。为此,我在完成后回调函数中做了这个小调整

$('#slide li:last').after('#slide li:first')

这基本上就是让无限幻灯片放映发生的原因。但是,它特别弄乱了第二张幻灯片。在从幻灯片 1 到幻灯片 2 的第一次迭代中,幻灯片 2 被幻灯片 3 取代(而且发生得非常快)。每个后续迭代都可以正常工作,幻灯片 2 将自身呈现为幻灯片 2 而不是幻灯片 3。

要进一步了解此示例,请查看以下捕获所有必要的 HTML、CSS 和 jQuery 的 js fiddle。

jsfiddle for jQuery infinite carousel/slideshow

有人知道怎么回事吗:)?

最佳答案

它的发生是因为在动画完成后,您要从 ul 的开头删除 li 并将其放在末尾,从而重置 left_indent 为 1 元素的倍数。

一个简单的解决方法是使用 $('#slides ul').css({'left': 0}); 而不是 $('#slides ul')。 css({'left': -item_width});

jsfiddle

关于jQuery 无限轮播 : Slide # 2 replaced by Slide # 3 on first iteration,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13557253/

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