Question

我正在构建一个无限的jQuery轮播。无限的是它在向用户显示最终幻灯片之后立即显示第一张幻灯片。为实现这一目标，我在后期完成回调函数

中进行了这一小调整

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

这基本上是无限幻灯片发生的原因。但是，它特别混淆了第二张幻灯片。在从幻灯片1到幻灯片2的第一次迭代中，幻灯片2被幻灯片3取代（并且它很快发生）。每次后续迭代都可以正常工作，幻灯片2将自身渲染为幻灯片2，而不是幻灯片3.

为了进一步理解这个例子，请看一下下面的js小提琴，它捕获了所有必要的HTML，CSS，jQuery。

jsfiddle for jQuery infinite carousel/slideshow

有人知道怎么了:)？

Answer 1

它的发生是因为在动画完成后你从li的开头删除ul并将其放在最后，从而将left_indent重置为多个1个元素。

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

jsfiddle

Answer 2

更简单的方法：

<强> jsBin demo

function slideshow(){

 var item_width = $('#slides li').outerWidth(true);

 $('#slides ul').stop().animate({left:-item_width},1200, function(){
     $('#slides li:last').after( $('#slides li:first') );
     $('#slides ul').css({left:0});
 });

}

jQuery无限轮播：幻灯片＃2在第一次迭代时被幻灯片＃3取代

2 个答案: