7

純粋な JavaScript で独自のカルーセルを構築しようとしています。

オプションを追加する最も効率的な方法を見つけるのに苦労していinfinite carouselます。

何らかの理由で、すべての要素 (写真、汎用オブジェクト) にはid

私が見るアルゴリズムは次のようになります。

  • カルーセルがオーバーフローしているかどうかを確認します (コンテナー全体に収まる十分なオブジェクトがあるかどうか)。
  • そうでない場合: 最初の要素のコピーを後ろに追加し、次に 2 番目の要素のコピーを追加します。(ただし、このオブジェクトは同じ ID を持つため、ID に問題があります)

コピーの追加 - ユーザーが最後のオブジェクト (右) にスクロールしている場合は、最初の DOM オブジェクトを配列の後ろに追加します
。ユーザーが最初のオブジェクト (左) にスクロールしている場合は、最後の DOM 子を配列の前に追加します。

これはうまくいきますか？無限のカルーセルを行う他の効率的な方法はありますか?

左、右のプロパティを変更するよりも、translate プロパティを使用する方がよいと聞いたことがあります。そのため、CPU よりも GPU の作業が多くなります。

4

2 に答える 2

9

アニメーション手法として css 変換を使用し、プレーンな Javascript を使用して単純なスライダーを作成しました。

var img = document.getElementsByClassName("img")[0]; 
img.style.transform = 'translate('+value+'px)';

この codepen スニペットでテストできます。 http://codepen.io/TobiObeck/pen/QKpaBr

ボタンを押すと、すべての画像が x 軸に沿ってそれぞれの方向に移動します。端の画像は透明に設定さouterImg.style.opacity = '0';れ、反対側に移動されます。HTML で画像要素を追加または削除でき、引き続き機能します。

この 2 番目の codepen スニペットでは、それがどのように機能するかを確認できます。opacityが設定されているため、0.5どちらの画像が横に切り替わるかを観察できます。が削除されているためoverflow: hidden、端の画像が反対側でどのようにエンキューされているかを確認できます。 http://codepen.io/TobiObeck/pen/WGpdLE

さらに、アニメーションが完成したかどうかをチェックすることは重要です。そうしないと、同時に追加された翻訳が奇妙に見えます。したがって、アニメーションが完了するまでクリックしても別のアニメーションはトリガーされません。

img.addEventListener("transitionend", transitionCompleted, true);

var transitionCompleted = function(){
    translationComplete = true;
}

leftBtnCLicked(){
    if(translationComplete === true){
       //doAnimation
    }
}
于 2016-09-24T16:15:43.373 に答える
0

このコードを使用してスライドを操作できます。これは基本的に配列を前後に回転させます

        <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style> 

    body {
    width: 100%;
    height: 100%;
    }

    .parentDiv {
    height: 30%;
    width: 100%;
    display: flex;
    }

    </style>
    <title>test</title>
    </head>
    <body>
    <button class="fwd"> Fwd! </button>
    <button class="bkwd"> Bkwd! </button>
    <script type="text/javascript">
    const arr = ['red', 'blue', 'coral', 'green', 'yellow'];
    let narr = ['red', 'blue', 'coral'];
    


    const parentDiv = document.createElement('div');
    parentDiv.setAttribute('class', 'parentDiv');
    document.body.insertAdjacentElement('afterbegin', parentDiv);


    window.onload = ()=> {
    narr.forEach(color => {
    while(parentDiv.children.length < narr.length){
    const childDiv = document.createElement('div');
    parentDiv.appendChild(childDiv);
    };
    });

    Array.from(parentDiv.children).forEach((child, index) => {
    child.style.border = '1px #000 dotted';
    child.style.minWidth = '20%';
    child.style.minHeight = '20vh';
    child.style.backgroundColor = narr[index]
    });
    };



    document.querySelector('.fwd').addEventListener('click', ()=>{
    narr.shift();

    if(narr[narr.length-1] === arr[arr.length-1]){
        narr.push(arr[0])
    } else {
    narr.push(arr[arr.indexOf(narr[narr.length-1])+1])
    }

    narr.forEach(color => {
    while(parentDiv.children.length < narr.length){
    const childDiv = document.createElement('div');
    parentDiv.appendChild(childDiv);
    };
    });

    Array.from(parentDiv.children).forEach((child, index) => {
    child.style.border = '1px #000 dotted';
    child.style.minWidth = '20%';
    child.style.minHeight = '20vh';
    child.style.backgroundColor = narr[index];
    
    
    });


    })


    document.querySelector('.bkwd').addEventListener('click', ()=>{
    narr.pop();
    if(narr[0] === arr[0]){
        narr.unshift(arr[arr.length-1])
    } else {
    narr.unshift(arr[arr.indexOf(narr[0])-1])
    }

    

    narr.forEach(color => {
    while(parentDiv.children.length < narr.length){
    const childDiv = document.createElement('div');
    parentDiv.appendChild(childDiv);
    };
    });

    Array.from(parentDiv.children).forEach((child, index) => {
    child.style.border = '1px #000 dotted';
    child.style.minWidth = '20%';
    child.style.minHeight = '20vh';
    child.style.backgroundColor = narr[index]
    });
    })

    </script>   
    </body>
    </html>
于 2021-09-03T19:12:19.277 に答える