jQuery を使用してカルーセル効果を実装する

本日ご紹介するのは、jQuery を使用してシンプルなカルーセルを実装する方法です。実装の原則は次のとおりです。

1. エリアの幅と高さを設定します。エリアがこの部分を超えると、非表示の

2. 画像サイズを300に設定し、インデックスは0から始まります。

3. 右側のボタンをクリックしたら、クリックしたボタンのインデックスに1を加算する必要があります。画像のサイズ+pxに乗じたインデックスに1を加算します。

4.スライドするときにアニメーション効果を追加すると素晴らしいものになります

5. 右側の効果は左側と同じです。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>カルーセル画像</title>
    <script type="text/javascript" src="./js/jquery-3.5.1.min.js"></script>
    <スタイル タイプ="text/css">
     *{
      パディング: 0;
      マージン: 0;
     }
     .uli{
   幅: 300ピクセル;
      高さ: 300px;
   ディスプレイ: フレックス;
   オーバーフロー: 非表示;
     }
     .uli li>画像{
      位置: 相対的;
      左: 0px;
      上: 0px;
      高さ: 300px;
     }
     .uli li{
      幅: 300ピクセル;
      高さ: 300px;
      リストスタイル:なし;
     }
     .a1{
      位置: 絶対;
      上: 100px;
      左: 0;
      カーソル: ポインタ;
      フォントサイズ: 50px
     }
     .a2{
      位置: 絶対;
      上: 100px;
      左: 260ピクセル;
      カーソル: ポインタ;
      フォントサイズ: 50px
     }
    </スタイル>
</head>
<本文>
 <!-- ul li 内の写真とドリンクの数を設定します -->
    <ul class="uli">
     <li><img src="./img/大冰黒茶.png" alt=""></li>
     <li><img src="./img/Big Honey Green Tea.png" alt=""></li>
     <li><img src="./img/大龙井绿茶.png" alt=""></li>
    </ul>
 <!-- 2 つの div 内の span は、右側の付箋と左側のラベルのクリック イベントを制御します -->
    <div class="pa1"> 
     <span class="a1"><</span>
     <span class="a2"> </span>
    </div>
    <script type="text/javascript">
 // エントリ関数を記述する $(function(){
   // 画像サイズを設定します var img = 300;
   // インデックスを0に設定する 
      var インデックス = 0;
   // 写真の数の長さを設定します。var option = $('.uli>li img').length;
      // 左の部分は $('.a2').click(function(){ で始まります
    // 次にイベントをクリックしてコールバック関数 left() を実行します
      })
   // 関数名 lest 
      関数 left(){
    // インデックスの値は 0 です。画像の長さより小さい場合は、++ オプションを実行してマイナス 1 を実行します。それ以外の場合は空白ページになります。if (index < option-1) {
                     インデックス++
                }それ以外 {
                 インデックス = 0
                }
                動く（）
      }
      // 左部分が終了 // 右部分が始まります $('.a1').click(function(){
    // 次にイベントをクリックしてコールバック関数を実行します right()
      })
      関数 right(){
    // インデックスの値は 0 です。画像の長さより大きい場合は、次のように実行されます。 
       （インデックス＞0）の場合{
        索引 - 
       }それ以外 {
        インデックス = オプション-1
       }
       動く（）
      }
   // 右関数と左関数には移動関数があり、インデックスをクリックすると、時間の経過とともに画像の数が 500 個ずつスライドします。 function move(){
               var a = -index * img + 'px'
               $('.uli li>img').animate({'left':a},500)
      }
     })
    </スクリプト>
</本文>
</html>

これが上記のコードです。小さな例で試してみることができます。

レンダリングを見てみましょう。

ビデオは再生できず、画像のみを見ることができます。