jQueryカルーセル機能を実装する方法

この記事では、jQueryカルーセル機能の実装コードを参考までに共有します。具体的な内容は次のとおりです。

jQuery カルーセル (アニメーションなし)

HTMLレイアウト

<!-- カルーセル領域全体 -->
  <div class="コンテナ">
   <!-- カルーセル-->
   <ul class="items" style="left:-200px">
   <!-- 実際には 5 枚の画像のみが回転され、最初の画像は最後の画像に配置され、最後の画像は最初の画像に配置されます (これはトリックです) -->
    <li>5</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>1</li>
   </ul>
   <!-- 左ページボタンと右ページボタン -->
   <span class="left">&lt;</span>
   <span class="right">&gt;</span>
   <!-- ドット -->
   <ul class="ポイント">
    <li class="current"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
</div>

<スタイル>
   /* カルーセルエリア*/
   。容器 {
    幅: 200ピクセル;
    高さ: 100px;
    マージン: 100px 自動;
    オーバーフロー: 非表示;
    位置: 相対的;
   }

   ul {
    位置: 絶対;
    リストスタイルタイプ: なし;
    幅: 1400ピクセル;
    パディング: 0;
    マージン: 0;
   }

   /* カルーセル画像*/
   .items li {
    幅: 200ピクセル;
    高さ: 100px;
    マージン: 0;
    パディング: 0;
    フロート: 左;
    背景色: ピンク;
    テキスト配置: 中央;
   }
   /* 左ページと右ページの範囲 */
   スパン {
    表示: ブロック;
    幅: 20px;
    高さ: 30px;
    背景色: rgba(70, 130, 180, 0.3);
    位置: 絶対;
    上位: 50%;
    変換: translateY(-50%);
    行の高さ: 30px;
   }

   スパン:ホバー{
    カーソル: ポインタ;
   }

   。左 {
    左: 0;
   }

   。右 {
    右: 0;
   }
   /* ドット */
   .ポイント{
    幅: 45px;
    マージン: 0;
    パディング: 0;
    下: 3px;
    左: 50%;
    変換: translateX(-50%);
   }

   .points li {
    フロート: 左;
    幅: 7px;
    高さ: 7px;
    境界線の半径: 50%;
    マージン: 1px;
    背景色: rgba(0, 0, 0, 0.5);
   }

   .points li:hover {
    背景色: rgba(255, 250, 205, 1);
   }

   .ポイント.現在{
    背景色: rgba(255, 250, 205, 1);
   }
</スタイル>

jQuery

<script type="text/javascript">
   // 1. ボタンをクリックしてページを左右に切り替えます------カルーセル + アニメーション、マウスが入ると再生が一時停止し、マウスが外に出ると再生が続行されます// 2. ページは 3 秒ごとに自動的に切り替わります// 3. ドットは一緒にスタイルを切り替えます// 左に切り替え let $left = $('.left')
   // 右に切り替える let $right = $('.right')
   //画像li
   $list = $('.items') とします。
   $items = $list.children() とします
   // 大きなコンテナ let $container = $('.container')
   // ポイント let $points = $('.points').children()
   定数長さ = $points.length

   //合計オフセット設定 = li.width
   定数項目幅 = 200
   // 各アニメーション時間をミリ秒単位で設定します
   定数時間 = 50
   // 移動回数 const n = 20
   // リストの最大オフセット - (長さ+1)*li.width
   定数 long = -(長さ + 1) * 項目の幅
   // ページをめくるかどうかを指定します。デフォルトではページはめくられていません。------>ページをめくるときにページをクリックしたときの位置ずれの問題を解決します。let moveFlag = false
   //タイマー移動時間 const TIME = 3000
   // 左に切り替える $left.click(function() {
    アイテムを変更する(true)
   })
   // 右に切り替える $right.click(function() {
    アイテムの変更(偽)
   })
   // 自動切り替え let timer = setInterval(function() {
    アイテムの変更(偽)
   }、 時間）
   // マウスが入ると再生が一時停止し、マウスが外に出ると再生が続行されます$container.hover(function() {
    クリアインターバル(タイマー)
   }、 関数（） {
    タイマー = setInterval(関数() {
     アイテムの変更(偽)
    }、 時間）
   })
   //ドットをクリックしてページをめくる$points.click(function() {
    //現在クリックされている要素のインデックスを取得します
    インデックス = $(this).index() とします。
    // 対応するインデックスマップにジャンプ changeItem(index)
    // dots の他の兄弟のスタイルをキャンセルします$points.eq(index).addClass('current').siblings().removeClass('current')
   })
   // 左右切り替え関数のカプセル化 function changeItem(flag) {
    // ページが現在めくられている場合は、直接戻ります if (moveFlag) {
     戻る
    }
    // ページがめくられていない場合は、コードを実行し、moveFlag を true に変更してページがめくられていることを示します。moveFlag = true
    // offset はオフセットです。let offset = 0;
    // 
    currentLeft = parseInt($list.position().left) とします。
    // 渡された型がブール値の場合、スムーズな左右のページめくりを意味します // 渡された型が数値の場合、ドットをクリックしてページをめくることを意味します if (typeof flag == 'boolean') {
     // 左に反転するか右に反転するかを決定し、対応する変位を設定します offset = flag ? itemWidth : -itemWidth
    } それ以外 {
     // ドットをクリックするとページがめくられます // -(flag + 1)*itemWidth はターゲット変位、currentLeft は現在の距離です offset = -(flag + 1) * itemWidth - currentLeft
    }
    // 実行回数を累積するために使用される let i = 0
    /*
    アニメーション効果の切り替え：回数に応じて合計距離を計算 = 合計オフセット = オフセット
    毎回時間を設定する
    */
    // 各移動の距離 itemOffset
    itemOffset = offset / n とします。
    // 現在の左を取得する
    // タイマー関数 const timer = setInterval(function() {
     // i===n になるまで実行されるたびに 1 を加算します。つまり、回数が十分になるとタイマーが停止します i++
     現在の左 += 項目オフセット
     // 左の値を設定します // 最初に値を設定してから判断する必要があります $list.css('left', currentLeft)
     もし (i === n) {
      // 変位は十分です。タイマーをクリアします。clearInterval(timer)
      // ページめくり終了 moveFlag = false
      // ドットはそれに応じて変化します$points.eq(Math.abs(currentLeft / itemWidth) - 1).addClass('current').siblings().removeClass('current')
      // 最後の画像が見つかったら、2 番目の画像に切り替えます。ビジュアルはカルーセルです。if (currentLeft == long) {
       $list.css('left', -itemWidth)
       // ドットを実際の最初の画像に設定します $points.eq(0).addClass('current').siblings().removeClass('current')
       // 最後の画像の一番下の画像に到達した場合は、実際の最初の画像に戻ります} else if (currentLeft == 0) {
       $list.css('left', -length * itemWidth)
       // ドットを実際の最後の画像に設定します $points.eq(length - 1).addClass('current').siblings().removeClass('current')
      }
     }
    }、 時間）
   }
</スクリプト>