JavaScript - ネイティブ JS カルーセル チャート

Question

最近ネイティブ JS カルーセル画像をいじっています

切り替えにトランジションを追加したため、最後の画像から最初の画像までの接続に大きな問題があります。

アイデアは、最後の画像の後に最初の画像を追加し、親要素から最初の画像を削除することです

1231これが考え方です

似たようなコードを書いたマスターはいますか? 参考にしてください

Answer 1

セックス悪魔の張おばさんの論理に基づいて作りました。

配置は: 1 2 3 4 5 1

最後の画像から最初の画像に遷移し、最後の1枚が表示されます。シーケンシャルなので、滑りは滑らかです。

キー：5→1後、直接復元width: 0 この時はまた初期状態に戻りますので、ほぼ欠点はありません。

スライドするたびにキューの最後尾に移動させることも試しましたが、実装が面倒で断念しました。

Answer 2

削除する必要はなく、既存のノードを直接追加して移動するだけです。次に、スクロール バーを変更します。

Answer 3

https://github.com/cubiq/Swip...
私の最初のスライダーは、IScroll の作者によって書かれたこれに基づいています

Answer 4

その必要はなく、DOM ノードでの操作が少ないほど良いです。たとえば、この並べ替え順序を 5 1 2 3 4 5 1 にすると、
5 から 1 へ右にスクロールするとき、アニメーションが完了したら、トランジションのあるクラスの位置を最初の 1 に再調整し、同じようにトランジションのあるクラスを左の 1 から 5 に割り当てます。 原理は視覚的な欺瞞を利用することです。右側の最初の 2 と 5 の後の 1 は同じスタイルで違いがないため、目的は達成されます。