問題タブ [infinite-carousel]

質問する

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

36 問題
Newest
Active
Bountied
318
Unanswered
0 投票する
2 に答える
15396 参照

javascript - バニラ JavaScript による無限カルーセル

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

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

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

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

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

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

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

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


12345678910