JavaScript - JS におけるエンドツーエンドのカルーセルの原理は何ですか?

Question

一般的なカルーセルは、画像の親コンテナの左側を変更することで実装されることが知られていますが、エンドツーエンドで接続されるカルーセルの原理はどうなるのでしょうか?

JS を制御するにはどうすればよいですか?

Answer 1

私の考えをお話しますので、お役に立てれば幸いです。私はJQueryを使っています。

• 1


• 2


• 3

<; li><img>4</li>
.....
<ul>
すべての li タグ $("li") を取得します。左または右の移動ボタンをクリックすると、ul は左右に XX ピクセル移動します (各 li は同じサイズ、li の幅 1 つ移動します)
最初の $("li").eq[0] を左に置き、それを ul Last に配置します (appendTo); 右に移動すると、最後の li が先頭に配置されます (prependTO)。
見栄えを良くするために、いくつかのアニメーション効果 animate() を追加します。

Answer 2

エンドツーエンドで接続しますよね？ 以前にいくつかの関連するカルーセルの原則を見てきましたが、一般的に、最初のカルーセルは、js を少し移動することで 2 番目のカルーセルに切り替わり、最後のカルーセルのコピーの後に別のカルーセルを追加できます。最後の画像から最初の画像のクローンへの切り替えも少し動きますが、切り替えが完了するとすぐに本物の最初の画像の位置に変更されます。 left: 0. この時点で、次のステップは 1 番目の写真から 2 番目の写真にめでたく切り替えることです。 - - これが質問者さんの質問なのでしょうか？

Answer 3

アイデアをください

カルーセル コンポーネント内の各画像は、全体として連続する他の画像と接続されているのではなく、独立した個別のものとして想像できます

画像が切り替わるたびに、ユーザーは実際の位置に関係なく、現在の画像と次の画像の 2 つの画像しか見ることができません。
そのため、切り替える必要があるときはいつでも使用できます。 、これら 2 つの画像を準備し、それらに対応するディスプレイスメント アニメーションを設定するだけです。いわゆるエンドツーエンドの接続で、「頭」を「尾」の後ろに配置してアニメーション化するだけです

。

前の画像に切り替えたい場合も同様で、現在の画像と前の画像を用意して、それらの変位アニメーションを設定するだけです

また、モバイルでは、ディスプレイスメントに transform: translate3d(x, 0, 0) を使用するのが最善です。これにより、GPU アクセラレーションが有効になります。そうしないと、アニメーションがフリーズします

Answer 4

実際には非常に単純ですが、元の画像が 5 枚あり、その構造は次のとおりだとします。 リーリー

それを次のように変換します:

リーリー

最初の写真が左にスライドしたら、アニメーションが終了した後に左から5番目の写真にリセットし、その逆も同様です!

Answer 5

カルーセル チャート src を動的に変更することを好みます

Answer 6

質問者はキューとスタックについて知っていますか? もし知っているなら、カルーセル チャートはキューであり、デキューされた要素はキューに再入力されます。

Answer 7

同じ写真を 2 セット使用し、トランジションを介して移動し、左に変更します。

2番目のグループの最初の写真まで左にした場合は、トランジションを直接オフにし、最初のグループの最初の写真まで左にした場合は、トランジションをオンにします

Answer 8

原理は次のとおりです。左に移動すると仮定し、移動するたびに、一番左のピクチャの p を右に移動します。つまり、最初の p を最後の p に移動し、同時に左のピクチャの値を変更します。大きなコンテナに画像の幅を追加します。

Answer 9

jqueryを使用する場合は、insertAfterとinsertBeforeを使用できます