JavaScript, um einen ausgefallenen Karusselleffekt zu erzielen

<div Klasse="Box">
        <div Klasse="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 Klasse="btns">
            <Eingabetyp="Schaltfläche" ID="links" Wert="<<<">
            <Eingabetyp="Schaltfläche" ID="rechts" Wert=">>>">
</div>

.box{Breite: 1000px;Höhe: 300px;Rand: 20px auto;Position: relativ;Überlauf: versteckt;}
        .box .imgbox{}
        .imgbox a{Breite: 1000px;Höhe: 300px;Position: absolute;links:1000px;oben:0;}
        .imgbox a:nth-child(1){links:0;}
        .imgbox img{Breite: 1000px;Höhe: 300px;}

        .btns-Eingabe {Breite: 40px; Höhe: 40px; Position: absolut; oben: 130px; Rand: keiner; Hintergrund: rgba (200,200,200,0,5);}
        #links{links:0;}
        #rechts{rechts: 0;}}

Klasse Banner{
        Konstruktor(){
            dies.links = document.getElementById("links");
            dies.rechts = document.getElementById("rechts");
            dieses.Kind = document.querySelectorAll(".imgbox a");

            // Kommt rein this.iNow = 0;
            //Um zu this.iPrev = this.child.length - 1 zu gelangen;
        }
        init(){
            var das = dies;
            this.left.addEventListener("klicken",Funktion(){
                dass.changeIndex(1);
            })
            this.right.addEventListener("klicken",Funktion(){
                dass.changeIndex(2);
            })
        }
        Index ändern(direkt){
            wenn(direkt == 1){
                wenn (diese.iNow == 0) {
                    dies.iNow = dieses.Kind.Länge-1;
                    dies.iPrev = 0;
                }anders{
                    dies.iNow--;
                    dies.iPrev = dies.iNow + 1;
                }
            }anders{
                wenn(dieses.iNow == dieses.Kind.Länge-1){
                    dies.iNow = 0;
                    dies.iPrev = dieses.Kind.Länge-1;
                }anders{
                    dies.iNow++;
                    // Der Index, zu dem gegangen werden soll, ist immer der Index, der hereinkommt - 1
                    dies.iPrev = dies.iNow – 1;
                }
            }
            // Beginnen Sie mit der Bewegung entsprechend dem Index this.move(direct);
        }
        bewegen(direkt){
            wenn(direkt == 1){
                // iPrev geht von 0 bis 1000
                dieses.Kind[dieses.iPrev].style.left = 0;
                bewegen(dieses.Kind[dieses.iPrev],{links:1000});
                // iNow kommt rein// von -1000 bis 0
                dies.Kind[dies.iNow].style.left = -1000 + "px";
                bewegen(dieses.Kind[dieses.iNow],{links:0});
            }anders{
                
                dieses.Kind[dieses.iPrev].style.left = 0;
                bewegen(dieses.Kind[dieses.iPrev],{links:-1000});
                dieses.Kind[dieses.iNow].style.left = 1000 + "px";
                bewegen(dieses.Kind[dieses.iNow],{links:0});
            }
        }
    }

var b = neues Banner();
b.init();

<div Klasse="Box">
        <div Klasse="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 Klasse="btns">
            <Eingabetyp="Schaltfläche" ID="links" Wert="<<<">
            <Eingabetyp="Schaltfläche" ID="rechts" Wert=">>>">
        </div>
        <div Klasse="Liste">
        </div>
</div>

.box{Breite: 1000px;Höhe: 300px;Rand: 20px auto;Position: relativ;Überlauf: versteckt;}
.box .imgbox{}
.imgbox a{Breite: 1000px;Höhe: 300px;Position: absolute;links:1000px;oben:0;}
.imgbox a:nth-child(1){links:0;}
.imgbox img{Breite: 1000px;Höhe: 300px;}

.btns-Eingabe {Breite: 40px; Höhe: 40px; Position: absolut; oben: 130px; Rand: keiner; Hintergrund: rgba (200,200,200,0,5);}
        #links{links:0;}
        #rechts{rechts: 0;}

.list{Breite: 1000px;Höhe: 30px;Position: absolut;links: 0;unten: 0;Anzeige: flex;Hintergrund: rgba(200,200,200,0,5);}
.list span{flex: 1;Zeilenhöhe: 30px;Textausrichtung: Mitte;Rahmen links:durchgezogen 1px schwarz;Rahmen rechts: durchgezogen 1px schwarz;}
.list span.active{Hintergrund: rot;Farbe: #fff;}

Klasse Banner{
        Konstruktor(){
            dies.links = document.getElementById("links");
            dies.rechts = document.getElementById("rechts");
            dieses.Kind = document.querySelectorAll(".imgbox a");
            diese.Liste = document.querySelector(".list");
            diese.box = document.querySelector(".box");

            dies.iNow = 0;
            dies.iPrev = dieses.Kind.Länge - 1;
        }
        init(){
            var das = dies;
            this.left.addEventListener("klicken",Funktion(){
                dass.changeIndex(1);
            })
            this.right.addEventListener("klicken",Funktion(){
                dass.changeIndex(-1);
            })
            // L3. Ereignisdelegierungsbindungsereignis this.list.onclick = function(eve){
                var e = eve || Fenster.Ereignis;
                var tar = e.target || e.srcElement;
                if(tar.tagName == "SPAN"){
                    // L4. Wenn das Ereignis ausgelöst wird, führen Sie den Änderungsindex aus und übergeben Sie den vor dem Punkt angeklickten Bereich an that.listChangeIndex(tar);
                }
            }
        }
        Index ändern(direkt){
            wenn(direkt == 1){
                wenn (this.iNow == 0) {
                    dies.iNow = dieses.Kind.Länge-1;
                    dies.iPrev = 0;
                }anders{
                    dies.iNow--;
                    dies.iPrev = dies.iNow + 1;
                }
            }anders{
                wenn(dieses.iNow == dieses.Kind.Länge-1){
                    dies.iNow = 0;
                    dies.iPrev = dieses.Kind.Länge-1;
                }anders{
                    dies.iNow++;
                    dies.iPrev = dies.iNow – 1;
                }
            }
            dies.verschieben(direkt);
        }
        bewegen(direkt){
            // Entsprechend dem Status der linken und rechten Tasten: links 1, rechts -1
            //Multiplikation verwenden //Um die Richtung verschiedener Schaltflächen zu ändern this.child[this.iPrev].style.left = 0;
            verschieben(dieses.Kind[dieses.iPrev],{links:dieses.Kind[0].offsetWidth * direkt});
            dieses.Kind[dieses.iNow].style.left = -dieses.Kind[0].offsetWidth * direkt + "px";
            bewegen(dieses.Kind[dieses.iNow],{links:0});

            dies.setActive();
        }
        Liste erstellen(){
            // L1. Erstellen Sie Bereiche entsprechend der Anzahl der Bilder und nummerieren Sie sie var str = ``;
            für(var i=0;i<this.child.length;i++){
                str += `<span index='${i}'>${i+1}</span>`;
            }
            diese.Liste.innerHTML = str;

            // L2. Aktuelles Standardelement festlegen this.setActive();
        }
        setActive(){
            für(var i=0;i<this.list.children.length;i++){
                diese.Liste.Kinder[i].Klassenname = "";
            }
            diese.Liste.Kinder[diese.iNow].Klassenname = "aktiv";
        }
        listChangeIndex(tar){
            // L5. Bestimmen Sie den Index für den Ausgang und den Index für den Eingang // this.iNow für den Ausgang // Holen Sie sich die Nummer des angeklickten Bereichs für den Eingang var index = parseInt(tar.getAttribute("index"));
            // Konsole.log(dies.iNow, Index);
            // L6-1. Richtung bestimmen, wenn (Index > this.iNow) {
                // L7-1. Nach links bewegen this.listMove(1,index);
            }
            // L6-2. Richtung bestimmen if(index < this.iNow){
                // L7-2. Nach rechts bewegen this.listMove(-1,index);
            }

            // L8. Legen Sie den aktuell angeklickten Index als nächsten Index fest, um zu diesem zu gelangen. iNow = index;

            // L9. Setzen Sie das aktuelle Element entsprechend dem geänderten Index this.setActive();
        }
        listMove(direkt,index){
            // this.iNow geht // Wohin soll es gehen, wohin soll es gehen this.child[this.iNow].style.left = 0;
            bewegen(dieses.Kind[dieses.iNow],{links:-1000 * direkt})
            // Index in// woher kommt man und wohin geht man
            dieses.Kind[index].style.left = 1000 * direkt + "px";
            verschieben(dieses.Kind[index],{links:0});
        }
        autoPlay(){
            var t = setzeInterval(()=>{
                dies.changeIndex(-1);
            },2000)

            diese.box.onmouseover = Funktion(){
                Intervall löschen(t);
            }

            var das = dies;
            diese.box.onmouseout = Funktion(){
                t = Intervall setzen(()=>{
                    dass.changeIndex(-1);
                },2000)
            }
            
            // console.log(das);
        }
    }


var b = neues Banner();
b.init();
b.createList();
b.autoPlay();

Funktion verschieben(ele,obj,cb){
    Intervall löschen(ele.t);
    ele.t = setzeInterval(() => {
        // Angenommen, der Status ist: Timer kann gelöscht werden. var i = true;
        // Da die Informationen im Objekt erst vom Timer verwendet werden, werden sie im Timer durchlaufen // und die im Voraus erhaltenen Attribute und Zielvariablen für (var attr in obj) {
            wenn (attr == "Deckkraft") {
                var iNow = getStyle(ele,attr) * 100;
            }anders{
                var iNow = parseInt(getStyle(ele,attr));
            }
    
            sei Geschwindigkeit = (Obj[attr] - iNow)/10;
            Geschwindigkeit = Geschwindigkeit < 0? Math.floor(Geschwindigkeit) : Math.ceil(Geschwindigkeit);
            // Solange ein Attribut das Ziel erreicht, wird es gestoppt, was falsch ist // Alle Attribute müssen das Ziel erreichen, bevor es gestoppt werden kann // Solange ein Attribut das Ziel nicht erreicht, darf es nicht gestoppt werden // Verwenden Sie den Status, um zu markieren, ob der Timer gestoppt werden soll // Solange ein Attribut das Ziel nicht erreicht: Der Timer darf nicht gelöscht werden, if (iNow !== obj[attr]) {
                i = falsch;
            }
            wenn (attr == "Deckkraft") {
                ele.style.opacity = (iNow + Geschwindigkeit)/100;
            }anders{
                ele.style[attr] = iNow + Geschwindigkeit + "px";
            }
        }
        // Wenn der Status nach jeder Ausführung des Timers nach der Ausführung aller Eigenschaften immer noch wahr ist, bedeutet dies, dass er nicht auf false geändert wurde. Wenn er nicht auf false geändert wurde, bedeutet dies, dass keine Eigenschaft das Ende erreicht hat, sodass der Status immer noch falsch ist und nicht gelöscht wird, wenn (i) {
            Intervall löschen(ele.t);
            // Der Benutzer entscheidet, welche Funktion ausgeführt werden soll, wenn die Animation endet. Wenn der Benutzer keine Parameter übergibt, wird standardmäßig entschieden, ob (cb) {
                cb();
            }
            // cb und cb();
        }
    }, 30);
}

Funktion getStyle(ele,attr){
    wenn(ele.currentStyle){
        gibt ele.currentStyle[attr] zurück;
    }anders{
        gibt getComputedStyle zurück (Element, false) [attr];
    }
}