2

css を使用して回転カルーセルを作成しました。カルーセルは「ul」タグで構築されています。左/右に移動するとき、リストの左または右に「li」を追加します（関連する値を複製し、それを追加/先頭に追加します）。次に、「ul」の左の値を修正し、アニメーションの css トランジションを使用して「ul」を移動します。これは、アニメーションで無限のナビゲーション効果を実現するために使用されます。
アニメーションは「次」のナビゲーションではうまく機能しますが、「戻る」では機能しません。私にとって最も紛らわしい部分は、「戻る」コードをデバッグするときにアニメーションが機能することです! (タイミングの問題かもしれませんが、なぜ「次」が機能するのですか???)

問題のデモはここにあります: jsfiddle

注意してください：これは私の実際のコードではありません。実際のコードはオブジェクト指向スタイルのプラグインでラップされ、ユーザーが前後に素早くクリックするなどの場合の検証と、jQuery 'animate' を使用したポリフィルが含まれます。既製のプラグインの使用も検討しましたが、要件が私が見つけた要件を満たしていませんでした...

4

1 に答える 1

0

この問題は私をやや困惑させます。途中（通話の前後）にアラートを追加するとaddClass、少し機能するようです。それはおそらくブラウザのDOM更新のタイミングと関係があり、少なくとも私にとっては、これは互換性のための巨大な危険信号です。

とにかくjQueryに依存しているので、代わりにjQueryアニメーションを使用することをお勧めします。コードは小さく、機能はサポートされており、CSS3より前のブラウザーで機能します。私は、代わりに使用するだけで、あなたがあなた自身に期待したことを正確に実行するあなたに基づいて、フィドルをモックアップしました。.animate()

swing私はjQueryイージングを利用していることに注意してください。より多くのイージングタイプ（ease-in-outCSSで使用していたものなど）が必要な場合は、 jQueryイージングプラグインを試してください。

使用されるコード（.prevボタン上）：

$('.prev').on('click', function() {
    var $childelement = $('ul');
    $childelement.children('li').last().clone().prependTo($childelement);
    $childelement.css({
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
        $childelement.children('li').last().remove();
    });
});​
于 2012-10-07T06:27:33.443 に答える