js, um einen gleitenden Karusselleffekt zu erzielen

<div Klasse="Banner">
        <ul>
            <li>
                <a href="">
                    <img src="bilder/1.jpeg">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/2.jpg">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/3.jpg">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/4.jpg">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="./images/5.jpg">
                </a>
            </li>
        </ul>
        <ol>
            
        </ol>
        <a href="#" class="left">&lt;</a>
        <a href="#" class="right">&gt;</a>
</div>

<Stil>
    *{
        Polsterung: 0;
        Rand: 0;
        Listenstil: keiner;
        Textdekoration: keine;
        Farbe: #000;
    }
    .Banner{
        Breite: 500px;
        Höhe: 300px;
        Rand: 50px automatisch;
        Position: relativ;
        Rand: 1px durchgezogen #000;
        Überlauf: versteckt;
    }
    .banner ul{
        Position: absolut;
        links: 0;
        oben: 0;
        Höhe: 300px;
        /* Breite: 2500px; */
    }
    .banner ul li{
        Breite: 500px;
        Höhe: 300px;
        schweben: links;
    }
    .banner ul li a img{
        Breite: 500px;
        Höhe: 300px;
    }
    .banner ol{
        /* Breite: 100px; */
        Höhe: 20px;
        Position: absolut;
        unten: 10px;
        Hintergrundfarbe: rgba(255,255,255,.7);
        links: 50 %;
        transformieren: übersetzenX(-50%);
        Rahmenradius: 10px;
        Anzeige: Flex;
        Inhalt ausrichten: gleichmäßiger Abstand;
        Elemente ausrichten: zentrieren;
    }
    /* .banner ol li{
        Breite: 10px;
        Höhe: 10px;
        Randradius: 50 %;
        Hintergrundfarbe: himmelblau;
    } */
    .banner>a{
        Breite: 20px;
        Höhe: 40px;
        Position: absolut;
        oben: 50 %;
        transformieren: verschiebeY(-50%);
        Hintergrundfarbe: rgba(10,10,10,.5);
        Schriftgröße: 20px;
        Farbe: #fff;
        Zeilenhöhe: 2;
        Textausrichtung: zentriert;
    }
    .banner>a.links{
        links: 0;
    }
    .banner>a.right{
        rechts: 0;
    }

var div = document.querySelector('.banner');
var ul = document.querySelector('ul');
var ol = document.querySelector('ol');
var left = document.querySelector('a.left');
var right = document.querySelector('a.right');
    // Einen Variablenindex festlegen, der als Index verwendet werden soll var index = 1;
    // Durchquere das li unterhalb von ul
für(var i=0;i<ul.children.length;i++){
    // Jedes li unter einem ul sollte einer kleinen Punktschaltfläche darunter entsprechen // Erstellen Sie die gleiche Anzahl kleiner Punkte var li = document.createElement('li');
    setStyle(li,{
        Breite: "10px",
        Höhe: "10px",
        "Randradius": "50 %",
        "Hintergrundfarbe": "himmelblau"
    })
    // Alle erstellten li in die große Box einfügen ol.appendChild(li);
}
    // Die ol-Box selbst hat keine Breite. Wir müssen die Breite der ol-Box entsprechend der Anzahl der kleinen Punkte darin festlegen. ol.style.width = ol.firstElementChild.offsetWidth*ul.children.length*2 + 'px';
    // Legen Sie eine Variable fest, die den Punkt mit dem Stil var that = ol.children[index-1] darstellt.
//Setze die Farbe Rot für den ersten Sohn von ol that.style.background = 'red';
// Um ​​eine bessere Verbindung zwischen dem Schiebekarussell zu erreichen, fügen Sie vor und nach dem „ul“ ein „li“ hinzu.
var lastLi = ul.lastElementChild.cloneNode(true);
var firstLi = ul.firstElementChild.cloneNode(true);
// Platzieren Sie die kopierten Beschriftungen vor und hinter der UL-Box ul.appendChild(firstLi);
ul.insertBefore(letztesLi,ul.erstesElementChild);
// Da sich die untergeordneten Elemente unter ul geändert haben, müssen wir die entsprechende Breite für ul festlegen ul.style.width = ul.children.length*lastLi.offsetWidth + 'px';
// Da wir von rechts nach links gleiten, müssen wir den linken Wert von ul negativ machen. ul.style.left = -ul.firstElementChild.offsetWidth + 'px';
// Setze die Variable und weise sie dem Timer zu. var timeId;
// Einen Schalter definieren var flag = true;
//Rechtsklick right.onclick = function(){
    //Wenn der Schalter nicht eingeschaltet ist, gib false zurück
    wenn(!flag){
        gibt false zurück;
    }
    // Und weisen Sie dem Schalter den Rückgabewert zu, um anzuzeigen, dass ein erneutes Klicken bei geschlossenem Schalter keine Auswirkung hat. Flag = false;
    // Wir haben vorher einen Index definiert und jedes Mal wenn wir darauf klicken, index++
    Index++;
    // Rufe die Verschiebefunktion auf move(ul,{left:-index*ul.children[0].offsetWidth},function(){
        // Tragen Sie in die Funktion ein, was nach Abschluss der Übung getan werden muss // Zuerst müssen wir den Index beurteilen. ul enthält insgesamt sieben untergeordnete Elemente. Der Index entspricht dem Index des untergeordneten ul-Elements, daher kann der Index ul.children.length-1 nicht überschreiten.
        wenn(index == ul.children.length - 1){
            // Wenn der Index gleich ul.children.length-1 ist
            //Index auf 1 neu zuweisen
            Index = 1;
            // Und weisen Sie auch den linken Wert von ul neu zu ul.style.left = -index*ul.children[0].offsetWidth + 'px';
        }
        // Der Punkt muss sich auch mit dem Bild bewegen // Wir setzen den Punkt, der dem Bild entspricht, auf die Variable, die, da der Punkt selbst einen Stil hat, zuerst seinen Stil auf den Standardwert setzt, that.style.backgroundColor = 'skyblue';
        // Der Stil des entsprechenden kleinen Punkts hat sich geändert ol.children[index-1].style.backgroundColor = 'red';
        // Nachdem die Stilkonvertierung erfolgreich war, weisen Sie den Punkt, der den Stil enthält, der Variablen zu, die
        das = ol.Kinder[index-1];
        // Am Ende der Bewegung den Schalter einschalten, sodass er mit einem Rechtsklick wieder eingeschaltet werden kann. flag = true;
    })
}
//Linksklick left.onclick = function(){
    wenn(!flag){
        gibt false zurück;
    }
    Flagge = falsch;
    // Linksklick gleitet von links nach rechts und wird zum Index--
    Index--;
    verschieben(ul,{links:-index*ul.children[0].offsetWidth},function(){
        wenn(index == ul.children.length - 1){
            Index = 1;
            ul.style.left = -index*ul.children[0].offsetWidth + 'px';
        }
         //Nach dem Eintritt in das Ereignis zuerst den Wert des Index bestimmen, if(index==0){
            // Wenn der Wert des Index 0 wird, weisen Sie den Index neu zu. index = ul.children.length-2;
            // Und weise den linken Wert von ul dem Wert des zweiten Bildes neu zu ul.style.left = -index * firstLi.offsetWidth + "px"
        }
        that.style.backgroundColor = "himmelblau";
        ol.children[index-1].style.backgroundColor = "rot";
        das = ol.Kinder[index-1];
        Flagge = wahr;
    })
}
// Durchlaufe alle li unter ol
für (lass i = 0; i <ol.children.length; i++) {
    // Klicke auf den kleinen Punkt event ol.children[i].onclick = function(){
    wenn(!flag){
        gibt false zurück;
    }
    Flagge = falsch;
    // Da die Unterseite des Punkts um 1 kleiner ist als der Index des Bildes, müssen wir den Index im Punktklickereignis neu zuweisen, // damit der Punkt und das Bild dem Index = i+1 entsprechen können;
    verschieben(ul,{links:-index*firstLi.offsetWidth},Funktion(){
            // wenn(index == 0){
            // index = ul.children.length - 2
            // ul.style.left = -index.ul.children[0].offsetWidth + 'px'
            // }
            that.style.backgroundColor = "himmelblau";
            ol.children[index-1].style.backgroundColor = "rot";
            das = ol.Kinder[index-1];
            Flagge = wahr;
        })
    }
};
    // Automatische Rotation timeId = setInterval(function(){
        wenn(!flag){
            gibt false zurück;
        }
        Flagge = falsch;
        Index++;
        verschieben(ul,{links:-index*firstLi.offsetWidth},Funktion(){
            wenn(index == ul.children.length - 1){
                Index = 1
                ul.style.left = -index*ul.children[0].offsetWidth + 'px'
            }
            that.style.backgroundColor = "himmelblau";
            ol.children[index-1].style.backgroundColor = "rot";
            das = ol.Kinder[index-1];
            Flagge = wahr;
        })
    },2000);

    // Stoppen Sie das Karussell, wenn die Maus darüber fährtdiv.onmouseover = function(){
        Intervall löschen(Zeit-ID);
    }

    //Automatisch drehen, nachdem die Maus den Cursor bewegt div.onmouseout = function(){
        Zeit-ID = Intervall festlegen (Funktion () {
            wenn(!flag){
                gibt false zurück;
            }
            Flagge = falsch;
            Index++;
            verschieben(ul,{links:-index*firstLi.offsetWidth},Funktion(){
                wenn(index == ul.children.length - 1){
                    Index = 1
                    ul.style.left = -index*ul.children[0].offsetWidth + 'px'
                }
                that.style.backgroundColor = "himmelblau";
                ol.children[index-1].style.backgroundColor = "rot";
                das = ol.children[index-1];
                Flagge = wahr;
            })
        },1000);
    };
//Gepackte Multi-Motion-Funktion function move(ele,obj,fn){
            lass ZeitObj = {};
            für (let attr in obj) {
                ZeitObj[attr] = setzeIntervall(Funktion(){
                    var Ziel = parseFloat(obj[attr]);
                    wenn (attr === 'Deckkraft') {
                        Ziel*=100
                    }
                    var t = parseFloat(getStyle(ele,attr));
                    wenn (attr === 'Deckkraft') {
                        t*=100
                    }
                    console.log(t)
                    wenn((Ziel-t)/100>0){
                        var Prozent = Math.ceil((Ziel-t)/100);
                    }anders{
                        var Prozent = Math.floor((Ziel-t)/100);
                    }
                    t += Prozent;
                    wenn (attr === 'Deckkraft') {
                        ele.style[attr] = t/100 
                    }anders{
                        ele.style[attr] = t + 'px';
                    }
                    wenn(t == Ziel){
                        Löschintervall(Zeitobjekt[Attr])
                        lösche timeObj[attr]
                        sei k = 0;
                        für (lass i in timeObj) {
                            k++;
                        }
                        wenn(k==0){
                            fn();
                            konsole.log(123)
                        }
                    }
                },10)
            }
        }

// Gekapselte Funktion zum Abrufen des Stils function getStyle(ele,attr){
    wenn (window.getComputedStyle) {
        gibt window.getComputedStyle(ele)[attr] zurück;
    }anders{
        gibt ele.currentStyle[attr] zurück;
    }
}
// Kapselt die Funktion zum Setzen des Stils ein function setStyle(ele,styleObj){
    für (var attr in styleObj) {
        ele.style[attr] = styleObj[attr];
    }
};