シンプルなカルーセルチャートを実装するための JavaScript の最も完全なコード分析 (ES5)

この記事では、シンプルなカルーセル効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

完全なコード:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="UTF-8">
  <title>ES5 カルーセル画像</title>
  <スタイル>
   * {パディング: 0;マージン: 0;}
   #ラッパー{
    位置: 相対的;
    マージン: 50px 自動;
    パディング: 0;
    幅: 1000ピクセル;
    高さ: 300px;
   }
   #ラッパー.コンテンツ{
    位置: 相対的;
    幅: 100%;
    高さ: 100%;
    オーバーフロー: 非表示;
   }
   #ラッパー>.コンテンツ>.imgs {
    位置: 絶対;
    マージン: 0;
    パディング: 0;
    左: 0;
    上: 0;
    幅: 6000ピクセル;
    /* 追加の画像用に十分なスペースを残してください。 */
    リストスタイル: なし;
   }
   #ラッパー>.コンテンツ>.imgs li {
    フロート: 左;
    マージン: 0;
    パディング: 0;
    幅: 1000ピクセル;
    高さ: 300px;
   }
   #ラッパー>.content>.imgs>li img {
    幅: 100%;
    高さ: 100%;
   }
   #ラッパー>.コンテンツ>.ドット{
    幅: 163ピクセル;
    位置: 絶対;
    右: 0;
    左: 0;
    マージン: 自動;
    下: 10px;
    リストスタイル: なし;
   }
   #ラッパー>.コンテンツ>.ドットli {
    フロート: 左;
    幅: 20px;
    高さ: 20px;
    テキスト配置: 中央;
    行の高さ: 20px;
    境界線の半径: 50%;
    左マージン: 10px;
    カーソル: ポインタ;
   }
   li.アクティブ{
    背景色: 白;
   }
   li.quiet {
    背景色: #5a5a58;
   }
   .btns{
    表示: なし;
   }
   .btns スパン {
    位置: 絶対;
    幅: 25px;
    高さ: 40px;
    上位: 50%;
    上マージン: -20px;
    行の高さ: 40px;
    テキスト配置: 中央;
    フォントの太さ: 太字;
    フォントファミリー: Simsun;
    フォントサイズ: 30px;
    境界線: 1px 実線 #fff;
    不透明度: 0.5;
    カーソル: ポインタ;
    色: #fff;
    背景：黒;
   }
   .btns .left {
    左: 5px;
   }
   .btns .right {
    左: 100%;
    左マージン: -32px;
   }
  </スタイル>
 </head>
 <本文>
  <div id="ラッパー">
   <div class="content">
    <ul class="imgs">
     <li><img src="img/s1.jpg" /></li>
     <li><img src="img/s2.jpg" /></li>
     <li><img src="img/s3.jpg" /></li>
     <li><img src="img/s4.jpg" /></li>
     <li><img src="img/s5.jpg" /></li>
    </ul>
    <ul class='ドット'></ul>
   </div>
   <div class="btns">
    <span class="left">&lt;</span>
    <span class="right">&gt;</span>
   </div>
  </div>
 </本文>
</html>
<スクリプト>
 var wrapper = document.getElementById("wrapper");
 var imgs = document.getElementsByClassName("imgs")[0];
 var ドット = document.getElementsByClassName("ドット")[0];
 var btns = document.getElementsByClassName("btns")[0];
 var dots = dots.children;
 var len = imgs.children.length; //画像の数 var width = wrapper.offsetWidth; //各画像の幅 var rate = 15; //画像の切り替え速度（px）
 var times = 1; // 速度を倍数に切り替える var timer = null; // タイマーを初期化する var imgSub = 0; // 現在表示されている画像の添え字 var dotSub = 0; // 現在表示されている画像のドット添え字 var temp;
 // DOM 構造にまだ挿入されていないドキュメント フラグメントを作成します。const frag = document.createDocumentFragment()
 // 写真の数に応じて対応するドットをドキュメントフラグメントに追加します for (let i = 0; i < len; i++) {
  const ドット = document.createElement("li");
  dot.className = 'quiet';
  // 最初にドキュメントフラグメントに挿入します frag.appendChild(dot);
 }
 //dotsフラグメントをDOM構造に均一に挿入する dots.appendChild(frag)
 // 最初のドットが強調表示されます dots.children[0].className = "active";
 // スライディング関数 function Roll(distance) { // パラメータ distance: スクロールのターゲットポイント（画像の幅の倍数である必要があります）
  clearInterval(imgs.timer); // この関数を実行するたびに、前のタイマーをクリアする必要があります。
  //画像の移動方向を決定します var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
  // 10 ミリ秒ごとに匿名関数を呼び出すタイマーを設定します。imgs.timer = setInterval(function() {
   //各呼び出しのスクロール位置（速度は speed px/10 ms）         
   imgs.style.left = imgs.offsetLeft + speed + "px";
   //ターゲット ポイントからの残りの px 値 var leave = distance - imgs.offsetLeft;
   /* ターゲットポイントに近づいたときに処理し、ターゲットの近くまでスクロールすると直接ターゲットに到達します。レート値が不適切に設定されている場合に画像を完全に表示できないことを回避します */
   もし (Math.abs(leave) <= Math.abs(speed)) {
    間隔をクリアします(imgs.timer);
    imgs.style.left = 距離 + "px";
   }
  }, 10);
 }
 /*最初の li をリストの最後に複製します*/
 imgs.appendChild(imgs.children[0].cloneNode(true));
 関数autoRun() {
  サブクラス
  ドットサブ++;
  if (imgSub > len) { // クローンされたアイテムをスクロールした後、imgs.style.left = 0; // 左を実際の最初のアイテムに変更します imgSub = 1; // 2 番目のアイテムから表示を開始します}
  // スクロール関数を呼び出します。パラメーターは下付き文字のスクロール距離です。Roll(-imgSub * width);
  // ドットインデックスが最後までスクロールした場合は、インデックスを 0 にリセットします
  if (dotSub > len - 1) { //最後のドットに到達したかどうかを判断 dotSub = 0;
  }
  // すべてのドットのデフォルトスタイルを変更するループ for (var i = 0; i < len; i++) {
   dots[i].className = "静かな";
  }
  // 現在スクロールされているドットにハイライト スタイルを追加します dotss[dotSub].className = "active";
 }
 // 自動スクロールを開始するためのタイマーを作成します。timer = setInterval(autoRun,2000);
 // 小さなドットを追加するループトリガーイベント for (var i = 0; i < len; i++) {
  ドット[i].インデックス = i;
  ドット[i].onmouseover = 関数() {
   (var j = 0; j < len; j++) の場合 {
    dots[j].className = "静かな";
   }
   this.className = "アクティブ";
   temp = ドットサブ;
   imgSub = dotSub = this.index;
   times = Math.abs(this.index - temp); // 前のドットからの距離 rate = rate * times; // 距離に応じて切り替え速度を変更します Roll(-this.index * width);
   レート = 15;
  }
 }
 // イベントを追加: マウスがラッパー上に移動すると、左と右のトグルボタンが表示されます wrapper.onmouseover = function() {
  タイマーの間隔をクリアします。
  btns.style.display = 'ブロック';
 }
 // イベントを追加: マウスがラッパーの外に出ると、左と右のトグルボタンが非表示になります wrapper.onmouseout = function() {
  タイマー = setInterval(autoRun,2000);
  btns.style.display = 'なし';
 }
 // 前のボタンをクリックしてイベントをトリガーします btns.children[0].onclick = function() {
  画像サブ--;
  ドットサブ--;
  if (imgSub < 0) { //最初の項目をスクロールした後、imgs.style.left = -len * width + "px"; //左を最初の複製された項目に変更します。imgSub = dotSub = len - 1;
  }
  ロール(-imgSub * 幅);
  （ドットサブ<0）の場合{
   ドットサブ = 長さ - 1;
  }
  (var i = 0; i < len; i++) の場合 {
   dots[i].className = "静かな";
  }
  dotss[dotSub].className = "アクティブ";
 }
 // 次のボタンをクリックしてイベントをトリガーします btns.children[1].onclick = autoRun;
</スクリプト>

写真：