0

これに似たカルーセルコンポーネントを作成しようとしています。基本的にこの実装は私が探しているものですが、処理しない (またはオプションとして持っていない) のは、可変数の項目を持つスライドです。彼ら。

私が話しているのはこれです: リンクに記載されている実装は各スライドの 3 つの項目で機能し、最後のスライドに正確に 3 つの項目がない場合、そのスロットは空の項目で埋められます。これは、無限の実装を簡単にするかなり良い方法です。

1 つのスロットのみが空の場合はリストの最初の項目で、2 つのスロットが空の場合は最初の 2 つの項目でその空のスロットを埋めるように変更しようとしましたが、次のスライド セットの表示とロジックがまったく異なるという問題に遭遇しました。したがって、アニメーションは「グリッチ」になります。たとえば、最後のスライドの 1 つのスロットだけが空の場合、最初のスライドを「開始」に戻すと、最初のアイテムがなく、2 番目、3 番目、4 番目のアイテムが表示されます。

私の現在の「workaraound」は、すべての再配置（コントロールボタンのクリック）でアイテムを複製、追加、および先頭に追加していますが、これは非常に非効率的です（毎回DOMを操作し、元のセレクターに基づいて新しい要素のセットをキャッシュするのはコストがかかる可能性があります）そしておそらく「怠惰な方法」。

この問題に対する賢い解決策はありますか?

4

1 に答える 1

0

わかりました、私はこれをやってみました。位置：絶対; 仕方

正常に動作しているように見えますが、必要に応じて anim を調整するだけです

これが私の論理でした

overflow:hidden; position:relative;

コンテナに

すべての要素を取得

position:absolute;

すべてが隠されていますが、表示する 3 つ、この 3 つの要素は左の位置を取得し、インデックスにハード セットされます (描画要素から)

left:(4+n*40)+"px"

現在の要素のインデックスで配列を設定します

現在の変数 = [0,1,2];

変更時に、この配列の内容に +3 または -3 を追加し、モジュロを適切な範囲に制限します

function getIndex(n)
{    if(n < 0) return nbelem+n;
     return n%nbelem;
}

util 関数は現在の配列を取得し、表示する新しい要素を含む新しい配列を提供します

function getNewIndex(n)
{   var newIndex = [];
    for(c=0;c<3;c++)
        newIndex[c] = getIndex(current[c]+n);
    return newIndex;
}

変更時に、新しい現在の要素を表示し、それらの位置をコンテナー制限の右または左に取得します。その後、それらを新しい位置 ( left:(4+n*40)+"px" ) にアニメーション化し、古い要素をアニメーション化します要素を非表示にする前に、左または右のコンテナ制限に要素を表示しました

このすべてのアニメーションを実行するために、小さな専用関数 showMeElems(newArray,animWay) を作成します。

この関数を使用するには、左クリックと右クリックを定義するだけです

$left.click(function(){
    showMeElems(getNewIndex(-3),"left");
});

$right.click(function(){
    showMeElems(getNewIndex(3),"right");
})

ここにフィドルがあります

幸運を

于 2013-02-20T13:27:18.400 に答える