シンプルなカルーセル効果を実現するネイティブ js

//カルーセル用の大きなボックス let oCarousel = document.querySelector('.carousel')
//カルーセルの左ボタンと右ボタンのラベルの親要素 let oChevron = document.querySelector('.chevron')
//左ボタン let oLeft = document.querySelector('.chevron-left')
//右ボタン let oRight = document.querySelector('.chevron-right')
//カルーセル画像が配置されている親要素 ul を取得します
oUl = document.querySelector('.carousel-body') とします。
//カルーセル画像を含むliを取得する
oActives = document.querySelectorAll('.indicators li') とします。

関数アニメーション(obj,target){
    // タイマーをクリアする clearInterval(obj.timer)
        obj.timer = setInterval(()=>{
            // 要素の現在の位置を読み取る let curX=obj.offsetLeft
 
            //ステップサイズを定義する let step=10
            // 移動する方向を決定する（目標位置のサイズと現在の位置を比較する） 
            if(target<curX){
                ステップ=-10
            }
            // 現在の位置、目標位置、ステップ長の関係に従って、 // 目標位置と現在の位置の間の距離がステップ長より小さい限り、要素の位置は目標位置に直接設定されます if (Math.abs (target-curX) < Math.abs (step)) {
                obj.style.left=ターゲット+'px'
                クリア間隔(obj.timer)
            }それ以外{
                // 次のステップの位置を計算する let nextX=curX+step
                // 次のステップの位置をobj.style.leftに割り当てる
                obj.style.left=nextX+'px'
            }
        },10)
    }

oCarousel.onmouseover = 関数 () {
        oChevron.style.display = "ブロック"
    }
 
    oCarousel.onmouseout = 関数 () {
        oChevron.style.display = "なし"
    }

n = 0とする
ステップ = 500 とする
    oLeft.onclick = 関数（）{
        んー
        
        (n == -1)の場合{
       //最初の画像 (n=0) に移動したら、もう一度クリックし (n=-1)、n を 4 に設定して最後の画像の位置にジャンプします //カルーセル画像を含む ul の位置が最後の画像の位置に変更されます (画像の幅は 500 ピクセルなので、最後の画像は 5*500=2500 になります)
            oUl.style.left = -2500 + 'px'
            4 位
        }
        //ターゲットは移動距離、つまりn番目の画像*各画像の幅です 
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    oRight.onclick = 関数（）{
        ++ いいえ
        (n == 6)の場合{
        //最後の画像 (n=5) に移動したら、もう一度クリックし (n=6)、n を 1 に設定して最初の画像の位置に移動します oUl.style.left = 0 + 'px'
            1 の場合
        }
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }

//document.querySelectorAll('.indicators li') を通じて上記で取得した li は疑似配列の形式で返されるため、各 li のクリック イベントをバインドするには疑似配列をトラバースする必要があります for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = 関数 () {
            //クリックされた項目のスタイルをハイライトするように設定する setActive(i)
            //そして、i の値を n に代入します (現在 i 番目の画像が表示されることを記録するのと同じです)
            n = 私
            //移動距離を設定する let target = -n * step
            アニメーション(oUl, ターゲット)
        }
    }
 
    // liを強調表示する関数をカプセル化します function setActive(ind) {
        //排他的思考を使用する: すべてをクリアしてから、クラス名を個別に設定する for (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'アクティブ'
    }

oLeft.onclick = 関数（）{
        んー
        (n == -1)の場合{
            oUl.style.left = -2500 + 'px'
            4 位
        }
        //setActive() 関数を呼び出して、n 番目の画像ページ番号のハイライト状態を変更します。setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    oRight.onclick = 関数（）{
        ++ いいえ
        (n == 6)の場合{
            oUl.style.left = 0 + 'px'
            1 の場合
        }
        // n が 5 の場合、6 番目の画像に到達したことを意味します (6 番目の画像は 1 番目の画像と同じですが、瞬間ジャンプの影響を防ぐためのスライド トランジションに使用されます)。そのため、ページ番号を 0 (最初の画像) に設定してハイライトする必要があります。 // ここでは 3 項式を使用します。n が 5 の場合、1 番目の画像をハイライトに設定し、それ以外の場合は n 番目の画像をハイライトに設定します。 n == 5 ? setActive(0) : setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }

//ページをロードするときは、まずタイマーをオンにする必要があります。そうしないと、カルーセルは自動的に再生されません。タイマーを開始するには、ムーブインとムーブアウトのイベントを待つ必要があります。timer = setInterval(function () {
            //右ボタンにバインドされたクリックイベント oRight.onclick() を呼び出す
        }, 2000)
 
    //マウスが移動したら、左矢印と右矢印を表示し、タイマーをクリアします oCarousel.onmouseover = function () {
        oChevron.style.display = "ブロック"
        クリアインターバル(タイマー)
    }
 
    //マウスが外に出ると、左右の矢印を非表示にしてタイマーを開始します oCarousel.onmouseout = function () {
        oChevron.style.display = "なし"
        タイマー = setInterval(関数() {
            o右クリック()
        }, 2000)
    }

* {
     マージン: 0;
     パディング: 0;
        }
 
        .カルーセル{
            幅: 500ピクセル;
            高さ: 200px;
            境界線: 1px 実線の赤;
            マージン: 100px 自動;
            位置: 相対的;
            オーバーフロー: 非表示;
        }
        .carousel li {
            リストスタイル: なし;
        }
 
        /* カルーセルコンテンツ*/
        .carousel-body {
            幅: 3000ピクセル;
            高さ: 200px;
            位置: 絶対;
        }
        .carousel-body li {
            リストスタイル: なし;
            フロート: 左;
            幅: 500ピクセル;
            高さ: 200px;
        }
 
        .carousel-body li img {
            幅: 100%;
            高さ: 100%;
        }
 
 
        /* 左と右のフォーカスボタン ​​/
        .carousel .chevron {
            位置: 絶対;
            上位: 50%;
            高さ: 40px;
            幅: 100%;
            変換: translateY(-50%);
            表示: なし;
        }
 
        .carousel .chevron-left,
        .carousel .chevron-right {
            幅: 40px;
            高さ: 40px;
            背景: #000;
            カーソル: ポインタ;
            テキスト配置: 中央;
            行の高さ: 40px;
            フォントサイズ: 30px;
            フォントの太さ: 太字;
            色: #fff;
            不透明度: .3;
            境界線: 1px 実線 #fff;
        }
 
 
        .carousel .chevron-left {
            フロート: 左;
            左マージン: 10px;
        }
 
 
        .carousel .chevron-right {
            フロート: 右;
            右マージン: 10px;
        }
 
 
        /* 5.2 カルーセルインジケータ構造*/
        .carousel .indicators {
            位置: 絶対;
            右: 30px;
            下: 20px;
        }
 
        .carousel .indicators li {
            フロート: 左;
            幅: 20px;
            高さ: 20px;
            右マージン: 10px;
            背景: rgba(255, 255, 255, .8);
            テキスト配置: 中央;
            行の高さ: 20px;
            カーソル: ポインタ;
            色: rgba(0, 0, 0, .5);
        }
 
        .carousel .indicators li.active {
            背景: #09f;
            色: 赤;
 }

<div class="carousel">
        <!-- カルーセルコンテンツ -->
        <ul class="carousel-body">
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/3.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/4.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/5.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/1.jpg" alt=""></a></li>
            <!-- a3.1 最初のものと同じ新しい li を追加します-->
            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->
        </ul>
        <!-- 左フォーカス ボタンと右フォーカス ボタン -->
        <div class="chevron">
            <div class="chevron-left">&laquo;</div>
            <div class="chevron-right">&raquo;</div>
        </div>
        <!-- 5.1 カルーセルインジケータの構造-->
        <ol class="インジケーター">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

oCarousel = document.querySelector('.carousel') とします。
oChevron = document.querySelector('.chevron') とします。
oLeft = document.querySelector('.chevron-left') とします。
oRight = document.querySelector('.chevron-right') とします。
oUl = document.querySelector('.carousel-body') とします。
oActives = document.querySelectorAll('.indicators li') とします。
 
    n = 0とする
    ステップ = 500 とする
    タイマーを鳴らす
    タイマー = setInterval(関数() {
            o右クリック()
        }, 2000)
    oCarousel.onmouseover = 関数 () {
        oChevron.style.display = "ブロック"
        クリアインターバル(タイマー)
    }
 
    oCarousel.onmouseout = 関数 () {
        oChevron.style.display = "なし"
        タイマー = setInterval(関数() {
            o右クリック()
        }, 2000)
    }
    oLeft.onclick = 関数（）{
        んー
        (n == -1)の場合{
            oUl.style.left = -2500 + 'px'
            4 位
        }
        setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    oRight.onclick = 関数（）{
        ++ いいえ
        (n == 6)の場合{
            oUl.style.left = 0 + 'px'
            1 の場合
        }
        n == 5 ? setActive(0) : setActive(n)
        ターゲット = -n * ステップ
        アニメーション(oUl, ターゲット)
 
    }
    (i = 0 とします; i < oActives.length; i++) {
        oActives[i].onclick = 関数 () {
            アクティブにする(i)
            n = 私
            ターゲット = -n * ステップ
            アニメーション(oUl, ターゲット)
        }
    }
 
    // liを強調表示する関数をカプセル化します function setActive(ind) {
        (j = 0; j < oActives.length; j++) の場合 {
            oActives[j].className = ''
        }
        oActives[ind].className = 'アクティブ'
    }
 
    関数アニメーション(obj,target){
        // タイマーをクリアする clearInterval(obj.timer)
        obj.timer = setInterval(()=>{
            // 要素の現在の位置を読み取る let curX=obj.offsetLeft
 
            //ステップサイズを定義する let step=10
            // 移動する方向を決定する（目標位置のサイズと現在の位置を比較する） 
            if(target<curX){
                ステップ=-10
            }
            // 現在の位置、目標位置、ステップ長の関係に従って、 // 目標位置と現在の位置の間の距離がステップ長より小さい限り、要素の位置は目標位置に直接設定されます if (Math.abs (target-curX) < Math.abs (step)) {
                obj.style.left=ターゲット+'px'
                クリア間隔(obj.timer)
            }それ以外{
                // 次のステップの位置を計算する let nextX=curX+step
                // 次のステップの位置をobj.style.leftに割り当てる
                obj.style.left=nextX+'px'
            }
        },10)
}