カルーセル例の JavaScript 実装

<スタイル>
       *{
           マージン: 0;
           パディング: 0;
           ボックスのサイズ: 境界線ボックス;
       }
       体{
           フォントサイズ: 14px;
           フォントファミリー: Arial、Helvetica、sans-serif;
       }
       .スライダーボックス{
          幅: 1226ピクセル;
          高さ: 460ピクセル;
          マージン: 10px 自動;
          オーバーフロー: 非表示;
          位置: 相対的;
       }
      .スライダーボックス .画像 a{
        幅: 100%;
        高さ: 460ピクセル;
        位置: 絶対;
        左: 0;
        上: 0;
        不透明度: 0;
        遷移: すべて 2;
       }
 
       .slider-box .images a.active{
           不透明度: 1;
       }
 
       .slider-box .images 画像{
           幅: 100%;
           高さ: 100%;
           表示: ブロック;
       }
       .スライダーボックス .nav{
           位置: 絶対;
           左: 0;
           上: 195px;
           幅: 100%;
           /* 背景色: 赤; */
           パディング: 0 10px;
           /* 高さ: 100px; */
       }
       .スライダーボックス .nav a{
           背景画像: url(img/icons.png);
           幅: 41ピクセル;
           高さ: 69px;
           表示: インラインブロック;
           背景繰り返し: 繰り返しなし;
       }
       .スライダーボックス .nav .prev{
           背景位置: -84px 0;
       }
       .slider-box .nav .prev:hover{
           背景位置: 0 0;
       }
       .スライダーボックス .nav .next{
           背景位置: -125px 0;
           フロート: 右;
       }
       .slider-box .nav .next:hover{
           背景位置: -42px 0;
       }
       .スライダーボックス .ページ{
           位置: 絶対;
           右: 20px;
           下: 25px;
           フォントサイズ: 0;
           幅: 1186ピクセル;
           テキスト配置: 中央;
           /* 背景色: レベッカパープル; */
       }
       .スライダーボックス .ページ .dot{
           表示: インラインブロック;
           幅: 10px;
           高さ: 10px;
           境界線の半径: 50%;
           背景色: rgba(0,0,0,0.4);
           右マージン: 10px;
       }
       .スライダーボックス .ページ .dot:hover{
        背景色: 黄色;
       }
       .スライダーボックス .ページ .dot.active{
        背景色: 黄色;
       }
 
</スタイル>

<div class="スライダーボックス">
        <div class="images">
            <!-- 将来的に画像を表示したい場合は、アクティブ クラスを追加するだけです -->
            <a href="#" class="アクティブ">
                <img src="img/1.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/2.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/3.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/4.jpg" alt="">
            </a>
            <a href="#" >
                <img src="img/5.jpg" alt="">
            </a>
        </div>
        <div class="nav">
            <a href="javascript:;" class="prev" title="前へ"></a>
            <a href="javascript:;" class="next" title="次へ"></a>
        </div>
        <div class="pages">
            <a href="javascript:;" class="dot active"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
            <a href="javascript:;" class="dot"></a>
        </div>
</div>

<スクリプト>
        // タイマー切り替え画像関数 var images = document.querySelectorAll('.images a')
        var index = 0 //再生する画像のインデックスを定義します var pages = document.querySelectorAll(".dot")
        var prev = document.querySelector(".prev")
        var next = document.querySelector(".next")
        // インデックス値に従って画像を切り替える // 画像の a タグを見つけてアクティブクラスを追加する function showImage(idx){
            画像.forEach(関数(v,i){
                // idx = 1
                // i = 0 1 2 3 4
                if(i===idx){
                  v.classList.add('アクティブ')
                //対応するポイントのハイライトを制御する pages[i].classList.add("active")
 
                }それ以外{
                    v.classList.remove('アクティブ')
                    pages[i].classList.remove("アクティブ")
                }
            })
        }
    // 画像を表示(3)
 
    prev.onclick = 関数(){
        if(インデックス===0){
            インデックス = images.length - 1 // 4
        }それ以外{
            インデックス = インデックス - 1
        }
        画像を表示(インデックス)
    }
    next.onclick = 関数(){
        if(index===images.length-1){
            インデックス = 0
        }それ以外{
            インデックス+=1
        }
        画像を表示(インデックス)
    }
    var タイマー = setInterval(関数(){
        // タイマーは画像の切り替えを制御し、次の画像をクリックするのと同じ機能を持ちます // 次の画像のクリック操作を呼び出します next.click() // 次のクリック操作をシミュレートします },3000)
</スクリプト>