1

順序付けられていない画像のリストを水平スクロールカルーセルに変換するスクリプトがありますが、動作が正しくありません。ここ...

setInterval(function(){
    $('#scroller ul li:first').animate({
        marginLeft : '-165px'
    }, 2000, 'linear', function() {
        // OnComplete
        $(this).css('margin-left', '0').appendTo('#scroller ul');
    });
}, 2000);

基本的に、最初のスライド<li>を左にスライドさせてから、の最後に移動し<ul>ます。

問題は、マージンが適切にリセットされないため、前の最後のリスト要素がオーバーレイされることです。アニメーションの次のラウンドでは、右にジャンプしますが、もちろんすぐに次のアニメーション+移動でオーバーレイされ<li>ます。

は<ul>、1つの画像の「オフスクリーン」用のスペースを許可するように設定された幅を持っていますが、追加はこのスペースを見逃しているようで、視覚的にレンダリングされたスペースの最後に配置します。

何か提案はありますか？


（Snook.caの最も単純なjQueryスライドショーに触発されました）

4

1 に答える 1

1

.stop()css 値を設定する前に a を追加すると機能します。

$(this).stop().css('margin-left', '0').appendTo('#scroller ul');

jsFiddleを作成しました。

于 2011-06-09T11:41:31.923 に答える