最近ネイティブ JS カルーセル画像をいじっています
切り替えにトランジションを追加したため、最後の画像から最初の画像までの接続に大きな問題があります。
アイデアは、最後の画像の後に最初の画像を追加し、親要素から最初の画像を削除することです
1231これが考え方です
似たようなコードを書いたマスターはいますか? 参考にしてください
学习是最好的投资！
セックス悪魔の張おばさんの論理に基づいて作りました。
配置は: 1 2 3 4 5 1
最後の画像から最初の画像に遷移し、最後の1枚が表示されます。シーケンシャルなので、滑りは滑らかです。
キー：5→1後、直接復元width: 0 この時はまた初期状態に戻りますので、ほぼ欠点はありません。
width: 0
スライドするたびにキューの最後尾に移動させることも試しましたが、実装が面倒で断念しました。
削除する必要はなく、既存のノードを直接追加して移動するだけです。次に、スクロール バーを変更します。
https://github.com/cubiq/Swip...私の最初のスライダーは、IScroll の作者によって書かれたこれに基づいています
その必要はなく、DOM ノードでの操作が少ないほど良いです。たとえば、この並べ替え順序を 5 1 2 3 4 5 1 にすると、 5 から 1 へ右にスクロールするとき、アニメーションが完了したら、トランジションのあるクラスの位置を最初の 1 に再調整し、同じようにトランジションのあるクラスを左の 1 から 5 に割り当てます。 原理は視覚的な欺瞞を利用することです。右側の最初の 2 と 5 の後の 1 は同じスタイルで違いがないため、目的は達成されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
セックス悪魔の張おばさんの論理に基づいて作りました。
配置は: 1 2 3 4 5 1
最後の画像から最初の画像に遷移し、最後の1枚が表示されます。シーケンシャルなので、滑りは滑らかです。
キー：5→1後、直接復元
width: 0この時はまた初期状態に戻りますので、ほぼ欠点はありません。スライドするたびにキューの最後尾に移動させることも試しましたが、実装が面倒で断念しました。
削除する必要はなく、既存のノードを直接追加して移動するだけです。次に、スクロール バーを変更します。
https://github.com/cubiq/Swip...
私の最初のスライダーは、IScroll の作者によって書かれたこれに基づいています
その必要はなく、DOM ノードでの操作が少ないほど良いです。たとえば、この並べ替え順序を 5 1 2 3 4 5 1 にすると、
5 から 1 へ右にスクロールするとき、アニメーションが完了したら、トランジションのあるクラスの位置を最初の 1 に再調整し、同じようにトランジションのあるクラスを左の 1 から 5 に割り当てます。 原理は視覚的な欺瞞を利用することです。右側の最初の 2 と 5 の後の 1 は同じスタイルで違いがないため、目的は達成されます。