シームレスなカルーセル効果を実現するネイティブ js

参考までに、ネイティブjsでカルーセル効果（シームレススクロール）を実現しています。具体的な内容は以下のとおりです。

効果画像:

コード：

<!DOCTYPE html>
<html lang="ja">
<!-- day07 7-10-14 -->
 
<ヘッド>
 <メタ文字セット="UTF-8">
 <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
 <title>ドキュメント</title>
 <script src="./images1/20.animate.js"></script>
 <スタイル>
 * {
  マージン: 0;
  パディング: 0;
 }
 
 li {
  リストスタイル: なし;
 }
 
 。集中 {
  /*オーバーフロー: 非表示;*/
  位置: 絶対;
  上: 100px;
  左: 200px;
  幅: 721ピクセル;
  高さ: 455px;
  背景色: 茶色;
 }
 
 .前,
 。次 {
  表示: なし;
  位置: 絶対;
  上位: 50%;
  上マージン: -15px;
  幅: 20px;
  高さ: 30px;
  背景色: rgba(0, 0, 0, .3);
  テキスト装飾: なし;
  色: #fff;
  行の高さ: 30px;
  テキスト配置: 中央;
  フォントサイズ: 16px;
  zインデックス: 2;
 }
 
 .focus ul {
  /* アニメーション js ファイルの導入には位置決めが必要です */
  位置: 絶対;
  幅: 600%;
 }
 
 .focus ul li {
  フロート: 左;
 }
 
 .前へ {
  左: 0;
  右上の境界線の半径: 15px;
  右下の境界線の半径: 15px;
 }
 
 。次 {
  右: 0;
  左上の境界線の半径: 15px;
  左下の境界線の半径: 15px;
 }
 
 .プロモナビ{
  位置: 絶対;
  下: 10px;
  左: 60px;
  幅: 200ピクセル;
  高さ: 18px;
  境界線の半径: 9px;
 }
 
 .promo-nav li {
  フロート: 左;
  幅: 10px;
  高さ: 10px;
  背景色: #fff;
  マージン: 2px;
  境界線の半径: 50%;
 }
 
 .promo-nav .current {
  背景色: オレンジ;
 }
 .focus ul li a img {
  幅: 721ピクセル;
  高さ: 455px;
 }
 </スタイル>
</head>
 
<本文>
 <div class="focus">
 <ul>
  <li>
  <a href="#" ><img src="images1/focu01.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu02.jpg" alt=""></a>
  </li>
 
  <li>
  <a href="#" ><img src="images1/focu03.jpg" alt=""></a>
  </li>
  <li>
  <a href="#" ><img src="images1/focu04.jpg" alt=""></a>
  </li>
 
 </ul>
 <!-- 左ボタン -->
 <a href="javascript:;" class="prev">&lt;</a>
 <!-- 右ボタン -->
 <a href="javascript:;" class="next">&gt;</a>
 
 <ol class="promo-nav">
 
 </ol>
 </div>
 <スクリプト>
 window.addEventListener('load', 関数() {
  var focus = document.querySelector('.focus');
  var prev = document.querySelector('.prev');
  var next = document.querySelector('.next');
  focusWidth を focus.offsetWidth に設定します。
  //マウスが通過する focus.addEventListener('mouseenter', function() {
   prev.style.display = 'ブロック';
   next.style.display = 'ブロック';
   タイマーの間隔をクリアします。
   timer = null; // タイマー変数をクリアする })
  //マウスがfocus.addEventListener('mouseleave', function() {から離れます
   prev.style.display = 'なし';
   next.style.display = 'なし';
   タイマー = setInterval(関数() {
   次へをクリックします。
   }, 2000)
 
  })
  //3. 小さな円を動的に生成します。写真の数だけ小さな円を生成します。var ul = focus.querySelector('ul');
  var ol = focus.querySelector('.promo-nav');
  // コンソール.log(ul.children.length); 4
  (var i = 0; i < ul.children.length; i++) の場合 {
  //liを作成する
  var li = document.createElement('li');
  //カスタム属性を通じて現在の小さな円のインデックス番号を記録します li.setAttribute('index', i);
  //ol の後に挿入 ol.appendChild(li);
  //4. マウスで小さな円をクリックして色を変更します（現在のクラスを小さな円に追加し、他の小さな円からこのクラスを削除します）（独自のアイデア）
  // 小さな円を生成するときにクリックイベントを直接バインドします li.addEventListener('click', function() {
   (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
   }
   this.className = '現在の';
 
 
   //5. 小さな点をクリックして画像を移動します。ul が移動します。
   // ul が移動する距離は、小さい円のインデックス番号に画像の幅を掛けた値です。負の値であることに注意してください。// 小さい li をクリックすると、現在の小さい li のインデックス番号が取得されます。var index = this.getAttribute('index');
   //特定のliをクリックすると、liのインデックス番号がnumに渡されます
   num = インデックス;
   //特定のliをクリックすると、liのインデックス番号がindexに渡されます
   円 = インデックス;
   コンソールログ(インデックス);
 
   アニメーション化(ul, -index * focusWidth, );
  })
 
  }
  //olの最初のliの色を白に設定します。ol.children[0].className = 'current';
  //6. 最初の li を複製し、ul の後ろに配置します。var first = ul.children[0].cloneNode(true);
  ul.appendChild(最初の子);
  //7. 右側のボタンをクリックして 1 枚の画像をスクロールします。var num = 0;
  var 円 = 0;
  var フラグ = true;
  //右ボタン next.addEventListener('click', function() {
   if (フラグ) {
   flag = false; //最初にスロットルを閉じる //5. 最後にコピーした画像に到達すると、ul はすぐに左を 0 に復元します (シームレス スクロール)
   num == ul.children.length - 1の場合{
    ul.style.left = 0;
    数値 = 0;
   }
   数値++;
   アニメーション(ul, -num * focusWidth, 関数() {
    フラグ = true;
   });
   //8. 右側のボタンをクリックすると、それに応じて小さい円が変化します。小さい円の変化を制御する変数を宣言します。circle++;
   //circleが4に等しい場合、最後の画像の複製が完了したことを意味し、それを復元します。if (circle == ol.children.length) {
    円 = 0;
   }
   // // 残っている小さな円のクラス名をクリアします// for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // // 現在の小さな円の現在のクラス名を残します// ol.children[circle].className = 'current';
   円の変更();
   }
  })
  //左ボタン prev.addEventListener('click', function() {
  if (フラグ) {
   フラグ = false;
   //5. 最後にコピーした画像に到達すると、ul はすぐに左を 0 に戻します (シームレス スクロール)
   数値 == 0 の場合
   num = ul.children.length - 1;
   ul.style.left = -num * focusWidth + 'px';
 
   }
   数値--;
   アニメーション(ul, -num * focusWidth, 関数() {
   フラグ = true;
   });
   //8. 右側のボタンをクリックすると、それに応じて小さい円が変化します。小さい円の変化を制御する変数を宣言します。circle--;
   //circleが0より小さい場合、小さい円は4番目の小さい円に変更されます if (circle < 0) {
   円 = ol.children.length - 1;
   }
   // 残りの小さな円のクラス名をクリアします // for (var i = 0; i < ol.children.length; i++) {
   // ol.children[i].className = '';
   // }
   // 現在の小さな円を現在のクラス名のままにします // ol.children[circle].className = 'current';
   円の変更();
  }
  })
 
  関数circleChange() {
  //残りの小さな円のクラス名をクリアします for (var i = 0; i < ol.children.length; i++) {
   ol.children[i].className = '';
  }
  //現在の小さな円を現在のクラス名のままにします ol.children[circle].className = 'current';
  }
 
  //10. スライドショーを自動的に再生する var timer = setInterval(function() {
  次へをクリックします。
  }, 2000)
 
 })
 </スクリプト>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: