0

私は無限のjQueryカルーセルを構築しています。最後のスライドがユーザーに表示された直後に最初のスライドが表示されることは無限です。これを実現するために、postcompleteコールバック関数でこの小さな調整を行います

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

これは基本的に無限のスライドショーを実現させるものです。ただし、特に2番目のスライドを台無しにします。スライド1からスライド2に移動する最初の反復で、スライド2はスライド3に置き換えられます（そしてそれは非常に迅速に行われます）。以降のすべての反復は、スライド2がスライド3ではなくスライド2としてレンダリングされる場合に正常に機能します。

この例をさらに理解するには、必要なすべてのHTML、CSS、jQueryをキャプチャする次のjsフィドルを見てください。

jQueryの無限カルーセル/スライドショーのjsfiddle

誰もが何が起こっているのか知っています:)？

4

2 に答える 2

2

これは、アニメーションの完了時に、liの先頭からを削除ulして最後に配置しleft_indent、1要素の倍数でリセットするために発生します。

簡単な修正は、$('#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 に答える