JS-Implementierung eines Karussellbeispiels

// Linke und rechte Pfeilelemente abrufen let arrow_l = this.document.querySelector('.arrow-l');
    Lassen Sie arrow_r = this.document.querySelector('.arrow-r');
    // Holen Sie sich das Diashow-Box-Element let focus = this.document.querySelector('.focus');

    // Fügen Sie Maus-Ein- und Maus-Aus-Ereignisse zum Diashow-Feld hinzu, um die linken und rechten Pfeile anzuzeigen oder auszublenden focus.addEventListener('mouseenter', function(e) {
        arrow_l.style.display = "Block";
        arrow_r.style.display = "Block";
        // Löschen Sie die Zeitfunktion, wenn sich die Maus bewegt, und das Karussell gleitet nicht mehr automatisch clearInterval(timer);
        Zeitgeber = null;

    });

    Fokus.addEventListener('mouseleave', Funktion(e) {
        arrow_l.style.display = "keine";
        arrow_r.style.display = "keine";
        //Bewegen Sie die Maus nach außen, um eine zeitgesteuerte Aufgabe hinzuzufügen. Lösen Sie alle 2 Sekunden einen Klick auf den rechten Pfeil aus. Timer = setInterval(function() {
            Pfeil_r.klick();
        }, 2000);
    })

// Holen Sie die Elemente der ul-Liste (Diashow-Liste) und der ol-Liste (kleine Kreisliste). var ul = focus.querySelector('ul');
// Die OL-Liste enthält derzeit keine Elemente. var ol = focus.querySelector('.circle');
// Füge so viele kleine Kreise hinzu, wie Diashows in der kreisförmigen Diashowliste vorhanden sind for (var i = 0; i < ul.children.length; i++) {
        //Li-Tag erstellen var li = this.document.createElement('li');
        // Fügen Sie dem li-Tag benutzerdefinierte Attribute als Index des Karussellbilds für li.setAttribute('l-index', i); hinzu.
        // Li-Tag zum ol-Tag hinzufügen ol.appendChild(li);
        //Füge jedem li-Tag eine Klickfunktion hinzu li.addEventListener('click', function() {
            // Stil aller kleinen Kreise löschen for (var j = 0; j < ol.children.length; j++) {
                ol.children[j].className = '';
            }
            // Klicken Sie auf einen kleinen Kreis, um Stil hinzuzufügen. this.className = 'current';

   // Klicken Sie auf den kleinen Kreis, um „num“ zu ändern, und auf „circl“, um das Karussell zu ändern. num = this.getAttribute('l-index');
            circl = this.getAttribute('l-index');
            // Animationseffekt animate(ul, -num * focusWidth);
        })

    }

// Einen Knoten der ersten Diashow klonen und zu ul hinzufügen // Beim Abspielen der letzten Diashow zur ersten Diashow wechseln, damit sie stimmig aussieht ol.children[0].className = 'current';
    Lassen Sie cloneLi = ul.children[0].cloneNode(true);
    ul.appendChild(cloneLi);

    // Fügen Sie einen Index hinzu, um die Anzahl der im Karussell abgespielten Bilder aufzuzeichnen. Num = 0;
    // Ähnlich wie bei num den Index des kleinen Kreises aufzeichnen circl = 0;
    // Drosselklappe hinzufügen flag = true;

// Klicken Sie auf das Klickereignis des rechten Pfeils arrow_r.addEventListener('click', function(e) {
        // Drossel hinzufügen. Der Standardwert ist True. Wenn er unmittelbar nach dem Klicken auf false geändert wird und das letzte Klickereignis nicht verarbeitet wird, wird das Klickereignis innerhalb dieser Zeit nicht verarbeitet. if (flag) {
            //Zustand der Drosselklappe ändern flag = false;

            // Wenn der Num-Index der letzte ist, stelle auf den ersten zurück und ändere den Num-Index auf den Standardwert 0
            wenn (num == ul.children.length - 1) {
                ul.style.left = 0;
                Zahl = 0;

            }
            // Num-Index plus 1
            Zahl++;
            // Ändere den Animationseffekt so, dass die Anzahl der Folien * die Breite einer Folie entspricht animate(ul, -num * focusWidth, function() {
                // Rückruffunktion setzt Throttle auf True, damit Sie erneut klicken können. Flag = True;
            });

            // Kleiner Kreis +1
            Kreis++;
            // Wenn der kleine Kreis den letzten erreicht, wird er auf 0 zurückgesetzt
            wenn (Kreis == ul.children.length - 1) {
                Kreis = 0;
            }
            // Den Stil des kleinen Kreises ändern circlChange();
        }
    })

//Linkspfeil-Klickereignis arrow_l.addEventListener('click', function(e) {
        wenn (Flagge) {
            Flagge = falsch;
            // Wenn der Wert 0 ist, bedeutet dies, dass mit dem ersten Bild begonnen und dann nach links gegangen wird, if (num == 0) {
                //Ändern Sie den Num-Index auf den letzten num = ul.children.length - 1;
                // Ändere das Karussellbild zum letzten ul.style.left = -num * focusWidth + 'px';
            }
            // Zahl -1
            Nummer--;
            // Animationseffekt animate(ul, -num * Fokusbreite, Funktion() {
                Flagge = wahr;
            });
            // Wenn der kleine Kreis 0 ist, bedeutet das, dass wir die erste Diashow erreicht haben, if (circl == 0) {
                // Kleiner Kreis zum letzten circl = ul.children.length - 1;
            }
            // Kleiner Kreis -1
            Kreis--;
            // Den Stil des kleinen Kreises ändern circlChange();
        }
    })

Funktion circlChange() {
     // Durchlaufe die ol-Liste und lösche den Stil jedes kleinen Kreises for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        };
        // Dem kleinen Kreis des aktuellen Kreisindex Stil hinzufügen ol.children[circl].className = 'current';
    }

Funktion animieren(Objekt, Ziel, Rückruf) {
    // console.log(callback); callback = function() {} beim Aufruf von callback()


    // Lösche zuerst den vorherigen Timer und behalte zur Ausführung nur den aktuellen Timer bei clearInterval(obj.timer);
    obj.timer = setzeIntervall(Funktion() {
        // Schreibe den Schrittwert in den Timer // Ändere unseren Schrittwert in eine Ganzzahl, um Dezimalprobleme zu vermeiden // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var Schritt = (Ziel – Objekt.OffsetLeft) / 10;
        Schritt = Schritt > 0? Math.ceil(Schritt) : Math.floor(Schritt);
        wenn (Objekt.OffsetLeft == Ziel) {
            // Durch das Stoppen der Animation wird grundsätzlich der Timer gestoppt. clearInterval(obj.timer);
            //Schreibe die Callback-Funktion an das Ende des Timers // if (callback) {
            // // Funktion aufrufen // callback();
            // }
            Rückruf && Rückruf();
        }
        // Ändern Sie den Schrittwert von einer Erhöhung um jeweils 1 in einen schrittweise abnehmenden Wert. Schrittformel: (Zielwert - aktuelle Position) / 10
        obj.style.left = obj.offsetLeft + Schritt + 'px';

    }, 15);
}