jQuery無限旋轉木馬：幻燈片＃2在第一次迭代時被幻燈片＃3取代

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

它的發生，因爲在動畫完成後你從ul的開始移除li，並把它的盡頭，從而以1元的倍數正在重置的left_indent。

一個簡單的解決方法是做$('#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}); 
}); 

}