javascript - javascriptを使用してカルーセルを実装する方法は？

Question

！写真は左から右にスクロールし、領域の中央にカーソルを合わせると元のように大きくなり、中央の位置を過ぎるとどんどん小さくなって消えていきます。javascriptを使用してこの作業を実装する方法を知っている人はいますか？任意の参照をいただければ幸いです。

Answer 1

あなたは本質的に、カルーセルの多くの側面がどのように機能するかを誰かに説明してもらいたいと思っています。その詳細レベルの最適なオプションは、既存の実装の 1 つを見つけて分析することです。

概念的には、カルーセルの動作は次の要素で構成されます。

1. 多数の画像をロードしています。
2. マウス イベントに応答するイベント ハンドラーを追加します。
3. 特定のマウス イベントを検出し、スクロール モーションの開始をトリガーします。
4. 画像を移動してサイズを変更する動きを示すアニメーションを作成します。
5. アニメーション化してサイズを変更するには、いくつかの方法があります。これは、CSS3 または jQuery のアニメーション ライブラリを使用するか、プレーンな JavaScript のタイマーを使用して、画像の位置とスケーリングされたサイズを操作しながら行うことができます。
6. 他の画像がスクロールアウトするにつれて、新しい画像をビューに回転させます。

Answer 2

jQueryでanimate関数を使用できると思います。以下は私がずっと前に書いたコードの一部ですが、何かを変更する必要があります。「3000」はミリ秒を意味します。$（function（）{$（ "body"）。click（function（）{$（ "＃panel"）。animate（{left： "500px"、height： "200px"}、3000）.animate（{top ："200px"、height： "100px"}、3000）.animate（{left： "0px"、height： "200px"}、3000）.animate（{top： "0px"、height： "100px"}、 3000）}）;}）;