0

我正在构建一个无限的 jQuery 轮播。无限是它在向用户显示最后一张幻灯片之后立即显示第一张幻灯片。为了实现这一点，我在后完成回调函数中进行了这个小调整

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

这基本上是使无限幻灯片发生的原因。但是，它尤其弄乱了第二张幻灯片。在从幻灯片 1 到幻灯片 2 的第一次迭代中，幻灯片 2 被幻灯片 3 取代（而且发生得非常快）。每次后续迭代都可以正常工作，幻灯片 2 将自身呈现为幻灯片 2 而不是幻灯片 3。

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

用于 jQuery 无限轮播/幻灯片的 jsfiddle

有人知道怎么了:)？

4

2 回答 2

2

之所以发生这种情况，是因为在动画完成后，您li要从开头删除 anul并将其放在末尾，从而将left_indent1 元素的倍数重置。

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

jsfiddle

于 2012-11-26T01:11:48.770 回答
1

更简单的方法：

jsBin 演示

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});
 });

}
于 2012-11-26T01:14:29.863 回答