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

Question

我正在构建一个无限的 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

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

Answer 1

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

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

jsfiddle