jsを使用してシンプルなカルーセル効果を実現する

<スタイル>
        。箱 {
            位置: 相対的;
            オーバーフロー: 非表示;
            マージン: 200px 自動;
            幅: 600ピクセル;
            高さ: 400px;
        }
        
        .img {
            幅: 3000ピクセル;
            高さ: 400px;
        }
        
        画像 {
            フロート: 左;
            幅: 600ピクセル;
            高さ: 400px;
        }
        
        .btn{
            位置: 絶対;
            上: 350px;
            左: 245px;
            幅: 110ピクセル;
            高さ: 20px;
        }
        
        .dian {
            フロート: 左;
            マージン: 5px;
            幅: 12px;
            高さ: 12px;
            境界線の半径: 50%;
            背景色: rgba(255, 255, 255, 0.3);
            カーソル: ポインタ;
        }
        
        。左、
        。右 {
            表示: なし;
            ボックスのサイズ: 境界線ボックス;
            位置: 絶対;
            上: 150px;
            幅: 50px;
            高さ: 100px;
            背景色: rgba(0, 0, 0, 0.521);
            フォントサイズ: 40px;
            行の高さ: 100px;
            色: #fff;
        }
        
        .box:hover .left,
        .box:hover .right {
            表示: ブロック;
        }
        
        。左 {
            左パディング: 10px;
            左: 0;
        }
        
        。右 {
            右パディング: 10px;
            テキスト配置: 右;
            右: 0;
        }
</スタイル>

<div class="box">
        <div class="img">
            <img src="./img/1.jpeg" alt="">
            <img src="./img/2.jpeg" alt="">
            <img src="./img/3.jpeg" alt="">
            <img src="./img/4.jpeg" alt="">
            <img src="./img/5.jpeg" alt="">
        </div>

        <div class="btn">
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
            <span class="dian"></span>
        </div>

        <div class="left">&lt; </div>
        <div class="right">&gt;</div>
</div>

<スクリプト>
        var btn = document.getElementsByClassName('btn')[0];
        var imgBox = document.getElementsByClassName('img')[0];
        var imgs = imgBox.getElementsByTagName('img');
        var btnChild = document.getElementsByClassName('dian');

        var k = 0;
        // ボタンにカスタムプロパティを追加します for (var i = 0; i < btnChild.length; i++) {
            btnChild[i].dataset.num = i * 600;
        }
        // デフォルトは最初の画像で、最初のボタンは白です btnChild[0].style.background = 'rgba(255, 255, 255, 0.8)';

        // ボタンをクリックすると画像が切り替わり、ボタンの色も変わります btn.onclick = function(e) {

            e.target.nodeName === 'SPAN' の場合 {
                // まずすべてのボタンをデフォルトの色に設定します for (var i = 0; i < btnChild.length; i++) {
                    btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
                }
                // クリックされたボタンの色が変わります k = +e.target.dataset.num;
                コンソールログ(k);
                btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';
                // 画像を切り替える imgBox.style.transform = `translateX(-${e.target.dataset.num}px)`;
            }
        }

        // 画像の長さを取得します // var imgWidth = +getComputedStyle(imgs[0]).width.slice(0, -2);
        var imgWidth = imgs[0].offsetWidth;


        // タイマーが画像を移動します var interval1 = setInterval(move, 1000);
        var 間隔;



        // 関数は画像を移動し、ボタンを変更します。function move() {
            k += 画像の幅;
            if (k === imgWidth * imgs.length) {
                0 = 0;
            }
            // 画像を移動する imgBox.style.transform = `translateX(-${k}px)`;
            // ボタンの色を変更する for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }


        // タイマーを削除するには、マウスを画像に移動します。var box = document.getElementsByClassName('box')[0];
        box.onmouseover = 関数() {
            間隔をクリアします(間隔1);
            clearInterval(間隔);
        }

        // マウスを外に出すとタイマーが開始されます box.onmouseout = function() {
            間隔 = setInterval(移動、1000);
        }

        var leftBtn = document.getElementsByClassName('left')[0];
        var rightBtn = document.getElementsByClassName('right')[0];

        rightBtn.onclick = 関数() {

            k += 画像の幅;
            if (k === imgWidth * imgs.length) {
                0 = 0;
            }
            // 画像を移動する imgBox.style.transform = `translateX(-${k}px)`;
            // ボタンの色を変更する for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }
        leftBtn.onclick = 関数() {
            k -= 画像の幅;
            (k < 0) の場合 {
                k = 画像の幅 * (画像の長さ - 1);
            }
            imgBox.style.transform = `translateX(-${k}px)`;
            // ボタンの色を変更する for (var i = 0; i < btnChild.length; i++) {
                btnChild[i].style.background = 'rgba(255, 255, 255, 0.4)';
            }

            btnChild[k / 600].style.background = 'rgba(255, 255, 255, 0.8)';


        }
</スクリプト>