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

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

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
  <スタイル タイプ="text/css">
   .aaa {
    幅: 600ピクセル;
    高さ: 350ピクセル;
    position: relative;/*相対的な位置指定*/
    margin: 50px auto;/*上から50px、中央揃え*/
   }
   .画像イメージ {
    position: absolute;/*絶対位置*/
   }
   .dot {
    位置: 絶対;
    下: 5px;
   }
   .dot li {
    フロート: 左;
    幅: 16px;
    高さ: 16px;
    背景色: #e8e8e8;
    境界線の半径: 50%;
    list-style: none;/*リストスタイルをクリア*/
    右マージン: 10px;
    カーソル: ポインター;/*カーソルはリンクを示すポインター（手）としてレンダリングされます*/
   }
   。左 {
    幅: 30ピクセル;
    高さ: 30px;
    位置: 絶対;
    上: 169px;
    テキスト配置: 中央;
    背景色: #000000;
    行の高さ: 30px;
    色: #FFFFFF;
    カーソル: ポインター;/*カーソルはリンクを示すポインター（手）としてレンダリングされます*/
   }
   。右 {
    幅: 30ピクセル;
    高さ: 30px;
    位置: 絶対;
    上: 169px;
    右: 0;
    テキスト配置: 中央;
    背景色: #000000;
    行の高さ: 30px;
    色: #FFFFFF;
    カーソル: ポインター;/*カーソルはリンクを示すポインター（手）としてレンダリングされます*/
   }
   .aaa .スポット {
    背景色: #FF0000;
   }
  </スタイル>
 </head>
 <本文>
  <div class="aaa">
   <div class="picture">
    <img src="images/1.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/2.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/3.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/4.jpg" スタイル="幅: 600px;高さ: 350px;">
    <img src="images/5.jpg" スタイル="幅: 600px;高さ: 350px;">
   </div>
   <ul class="dot">
    <li class="スポット"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   <div class="left">&lt;</div><!--&lt; エスケープ文字-->
   <div class="right">&gt;</div><!--&gt; エスケープ文字-->
  </div>
  <スクリプト>
   var lis = document.querySelectorAll(".dot li")
   var picture = document.querySelectorAll(".picture img")
   var 左 = document.querySelector(".left")
   var right = document.querySelector(".right")
   var aaa = document.querySelector(".aaa")
   var index = 0 //インデックス番号変数を設定する picture[index].style.opacity = 1 //最初の画像が表示される //右ボタンで画像が変わる right.onclick = function() {
    fn("+")
   }
   //画像を変更するには左ボタンをクリックしますleft.onclick = function() {
    fn("-")
   }
   //タイマーは3000ミリ秒ごとに画像を変更します var timer = setInterval(function() {
    fn("+")
   }, 3000)
   //マウスが一時停止します aaa.onmouseover = function() {
    クリアインターバル(タイマー)
   }
   //マウスアウトして続行 aaa.onmouseout = function() {
    タイマー = setInterval(関数() {
     fn("+")
    }, 3000)
   }
   //マウスがドットに触れたときに画像を変更する for (var i = 0; i < lis.length; i++) {
    lis[i].in = i
    lis[i].onmouseover = 関数() {
     fn(これ.in)
    }
   }
   //関数 function fn(ope) {
    picture[index].style.opacity = 0 //前の画像は非表示 lis[index].className = "" //小さなドットスタイルをクリア//Judge ope
    if (typeof ope === 'number') {
     インデックス = ope
    } else if (ope === '+') { //右ボタンかどうかを判断 if (index === 4) {
      インデックス = 0
     } それ以外 {
      インデックス++
     }
    } それ以外 {
     if (index === 0) { //左ボタンのインデックスが4かどうかを判断します
     } それ以外 {
      索引 - 
     }
    }
    picture[index].style.opacity = 1 //現在の画像 displaylis[index].className = "spot" //スポットにスタイルを追加}
  </スクリプト>
 </本文>
</html>

効果は図に示されています: