派手なカルーセル効果を実現するJavaScript

<div class="box">
        <div class="imgbox">
            <a><img src="img/banner1.jpg" alt=""></a>
            <a><img src="img/banner2.jpg" alt=""></a>
            <a><img src="img/banner3.jpg" alt=""></a>
            <a><img src="img/banner4.jpg" alt=""></a>
            <a><img src="img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
</div>

.box{幅: 1000px;高さ: 300px;余白: 20px 自動;位置: 相対;オーバーフロー: 非表示;}
        .box .imgbox{}
        .imgbox a{幅: 1000px;高さ: 300px;位置: 絶対;左: 1000px;上: 0;}
        .imgbox a:nth-child(1){left:0;}
        .imgbox img{幅: 1000px;高さ: 300px;}

        .btns 入力{幅: 40px;高さ: 40px;位置: 絶対;上: 130px;境界線: なし;背景: rgba(200,200,200,0.5);}
        #左{左:0;}
        #右{右: 0;}}

クラスバナー{
        コンストラクタ（）{
            左 = document.getElementById("左");
            要素の取得
            this.child = document.querySelectorAll(".imgbox a");

            // 入力中 this.iNow = 0;
            //進むには this.iPrev = this.child.length - 1;
        }
        初期化(){
            var that = this;
            this.left.addEventListener("クリック",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("クリック",function(){
                that.changeIndex(2);
            })
        }
        changeIndex(直接){
            if(直接 == 1){
                if (this.iNow == 0) {
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }それ以外{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }それ以外{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }それ以外{
                    this.iNow++;
                    // 移動先のインデックスは常に、入ってくるインデックス - 1 です
                    this.iPrev = this.iNow - 1;
                }
            }
            // インデックスに従って移動を開始します this.move(direct);
        }
        移動(直接){
            if(直接 == 1){
                // iPrev は 0 から 1000 まで
                this.child[this.iPrev].style.left = 0;
                移動(this.child[this.iPrev],{left:1000});
                // iNow は -1000 から 0 までの範囲になります
                this.child[this.iNow].style.left = -1000 + "px";
                移動(this.child[this.iNow],{left:0});
            }それ以外{
                
                this.child[this.iPrev].style.left = 0;
                移動(this.child[this.iPrev],{left:-1000});
                this.child[this.iNow].style.left = 1000 + "px";
                移動(this.child[this.iNow],{left:0});
            }
        }
    }

var b = 新しいバナー();
b.init();

<div class="box">
        <div class="imgbox">
            <a><img src="../img/banner1.jpg" alt=""></a>
            <a><img src="../img/banner2.jpg" alt=""></a>
            <a><img src="../img/banner3.jpg" alt=""></a>
            <a><img src="../img/banner4.jpg" alt=""></a>
            <a><img src="../img/banner5.jpg" alt=""></a>
        </div>
        <div class="btns">
            <input type="button" id="left" value="<<<">
            <input type="button" id="right" value=">>>">
        </div>
        <div class="list">
        </div>
</div>

.box{幅: 1000px;高さ: 300px;余白: 20px 自動;位置: 相対;オーバーフロー: 非表示;}
.box .imgbox{}
.imgbox a{幅: 1000px;高さ: 300px;位置: 絶対;左: 1000px;上: 0;}
.imgbox a:nth-child(1){left:0;}
.imgbox img{幅: 1000px;高さ: 300px;}

.btns 入力{幅: 40px;高さ: 40px;位置: 絶対;上: 130px;境界線: なし;背景: rgba(200,200,200,0.5);}
        #左{左:0;}
        #右{右: 0;}

.list{幅: 1000px;高さ: 30px;位置: absolute;左: 0;下: 0;表示: flex;背景: rgba(200,200,200,0.5);}
.list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;}
.list span.active{背景: 赤;色: #fff;}

クラスバナー{
        コンストラクタ（）{
            左 = document.getElementById("左");
            要素の取得
            this.child = document.querySelectorAll(".imgbox a");
            this.list = document.querySelector(".list");
            this.box = document.querySelector(".box");

            this.iNow = 0;
            this.iPrev = this.child.length - 1;
        }
        初期化(){
            var that = this;
            this.left.addEventListener("クリック",function(){
                that.changeIndex(1);
            })
            this.right.addEventListener("クリック",function(){
                that.changeIndex(-1);
            })
            // L3. イベント委任バインディングイベント this.list.onclick = function(eve){
                var e = eve || window.event;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "SPAN"){
                    // L4. イベントがトリガーされると、変更インデックスを実行し、ポイントの前にクリックされたスパンを that.listChangeIndex(tar); に渡します。
                }
            }
        }
        changeIndex(直接){
            if(直接 == 1){
                if (this.iNow == 0) {
                    this.iNow = this.child.length-1;
                    this.iPrev = 0;
                }それ以外{
                    this.iNow--;
                    this.iPrev = this.iNow + 1;
                }
            }それ以外{
                if(this.iNow == this.child.length-1){
                    this.iNow = 0;
                    this.iPrev = this.child.length-1;
                }それ以外{
                    this.iNow++;
                    this.iPrev = this.iNow - 1;
                }
            }
            this.move(直接移動)
        }
        移動(直接){
            // 左ボタンと右ボタンの状態に応じて: 左 1、右 -1
            // 乗算を使用します // 異なるボタンの方向を変更するには this.child[this.iPrev].style.left = 0;
            移動(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct});
            this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px";
            移動(this.child[this.iNow],{left:0});

            これをアクティブに設定します。
        }
        リストを作成します（）{
            // L1. 写真の数に対応するスパンを作成し、番号を付けます var str = ``;
            for(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            this.list.innerHTML = str;

            // L2. デフォルトの現在の項目を設定する this.setActive();
        }
        setActive(){
            for(var i=0;i<this.list.children.length;i++){
                this.list.children[i].className = "";
            }
            this.list.children[this.iNow].className = "アクティブ";
        }
        リスト変更インデックス(tar){
            // L5. 出るインデックスと入るインデックスを決定します // 出るには this.iNow // 入るにはクリックされたスパンの数を取得します var index = parseInt(tar.getAttribute("index"));
            // console.log(this.iNow, インデックス);
            // L6-1. 方向を決定する if (index > this.iNow) {
                // L7-1. 左に移動 this.listMove(1,index);
            }
            // L6-2. 方向を決定する if(index < this.iNow){
                // L7-2. 右に移動 this.listMove(-1,index);
            }

            // L8. 現在クリックされているインデックスを次のインデックスとして設定します。this.iNow = index;

            // L9. 変更されたインデックスに従って現在の項目を設定します。this.setActive();
        }
        リスト移動(直接、インデックス){
            // this.iNow は歩きます // どこへ行くか、どこへ行くか this.child[this.iNow].style.left = 0;
            移動(this.child[this.iNow],{left:-1000 * direct})
            // インデックス // どこから入ってどこへ行くか
            this.child[index].style.left = 1000 * direct + "px";
            移動(this.child[index],{left:0});
        }
        自動再生(){
            var t = setInterval(()=>{
                this.changeIndex(-1);
            },2000)

            this.box.onmouseover = 関数(){
                クリア間隔(t);
            }

            var that = this;
            this.box.onmouseout = 関数(){
                t = setInterval(()=>{
                    that.changeIndex(-1);
                },2000)
            }
            
            // console.log(それ);
        }
    }


var b = 新しいバナー();
b.init();
b.createList();
b.autoPlay();

関数move(ele,obj,cb){
    間隔をクリアします(ele.t);
    ele.t = setInterval(() => {
        // 状態が「タイマーをクリアできる」であると仮定します。var i = true;
        // オブジェクト内の情報はタイマーまで使用されないため、タイマー内で走査され、 // 事前に取得された属性とターゲット変数 for (var attr in obj) {
            if (attr == "不透明度") {
                var iNow = getStyle(ele,attr) * 100;
            }それ以外{
                var iNow = parseInt(getStyle(ele,attr));
            }
    
            speed = (obj[attr] - iNow)/10とします。
            速度 = 速度 < 0 ? Math.floor(速度) : Math.ceil(速度);
            // 1 つの属性がターゲットに到達すると停止しますが、これは誤りです // 停止するには、すべての属性がターゲットに到達する必要があります // 1 つの属性がターゲットに到達しない限り、停止してはいけません // 状態を使用してタイマーを停止するかどうかをマークします // 1 つの属性がターゲットに到達しない限り、タイマーはクリアしてはいけません if (iNow !== obj[attr]) {
                i = 偽;
            }
            if (attr == "不透明度") {
                ele.style.opacity = (iNow + 速度)/100;
            }それ以外{
                ele.style[attr] = iNow + 速度 + "px";
            }
        }
        // タイマーが実行されるたびにすべてのプロパティが実行された後も状態が true のままであれば、false に変更されていないことを意味します。false に変更されていない場合は、どのプロパティも終了に達していないため、状態は false のままであり、クリアされません if(i){
            間隔をクリアします(ele.t);
            // アニメーション終了時に実行する関数をユーザーが決定します。ユーザーがパラメータを渡さない場合は、デフォルトの判断を行います。if (cb) {
                関数 :
            }
            // cb && cb();
        }
    }, 30);
}

関数 getStyle(ele,attr){
    if(ele.currentStyle){
        ele.currentStyle[attr]を返します。
    }それ以外{
        getComputedStyle(ele,false)[attr]を返します。
    }
}