Natives js zum Erreichen eines einfachen Karusselleffekts

//Eine große Box für das Karussell let oCarousel = document.querySelector('.carousel')
//Das übergeordnete Element der Beschriftung für die linken und rechten Schaltflächen des Karussells let oChevron = document.querySelector('.chevron')
//Linke Taste let oLeft = document.querySelector('.chevron-left')
//Rechte Taste let oRight = document.querySelector('.chevron-right')
//Holen Sie sich das übergeordnete Element ul, in dem das Karussellbild platziert ist
let oUl = document.querySelector('.carousel-body')
//Holen Sie sich das li, das das Karussellbild enthält
let oActives = document.querySelectorAll('.indicators li')

Funktion Animation (Objekt, Ziel) {
    // Lösche den Timer clearInterval(obj.timer)
        obj.timer = setzeInterval(()=>{
            // Aktuelle Position des Elements lesen let curX=obj.offsetLeft
 
            //Definieren Sie eine Schrittweite let step=10
            // Bestimmen Sie die Bewegungsrichtung (vergleichen Sie die Größe der Zielposition mit der aktuellen Position) 
            wenn(Ziel<aktuellX){
                Schritt=-10
            }
            // Entsprechend der Beziehung zwischen der aktuellen Position, der Zielposition und der Schrittlänge, // Solange der Abstand zwischen der Zielposition und der aktuellen Position kleiner als die Schrittlänge ist, wird die Position des Elements direkt auf die Zielposition gesetzt if (Math.abs (target-curX) < Math.abs (step)) {
                obj.stil.links=Ziel+'px'
                Intervall löschen(obj.timer)
            }anders{
                //Berechnen Sie die Position des nächsten Schritts let nextX=curX+step
                // Weisen Sie obj.style.left die Position des nächsten Schritts zu.
                obj.style.left=nextX+'px'
            }
        },10)
    }

oCarousel.onmouseover = Funktion () {
        oChevron.style.display = "Block"
    }
 
    oCarousel.onmouseout = Funktion () {
        oChevron.style.display = "keine"
    }

sei n = 0
sei Schritt = 500
    oLeft.onclick = Funktion () {
        N--
        
        wenn (n == -1) {
       //Wenn Sie zum ersten Bild wechseln (n = 0), klicken Sie erneut (n = -1), setzen Sie n auf 4 und springen Sie zur Position des letzten Bildes. //Die Position der UL, die das Karussellbild enthält, wird auf die Position des letzten Bildes geändert (da die Breite eines Bildes 500 Pixel beträgt, befindet sich das letzte Bild bei 5 * 500 = 2500).
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //Ziel ist die Bewegungsdistanz, d.h.: das n-te Bild * die Breite jedes Bildes 
        let target = -n * Schritt
        Animation (oUl, Ziel)
 
    }
    oRechts.onclick = Funktion () {
        n++
        wenn (n == 6) {
        //Wenn Sie zum letzten Bild (n=5) wechseln, klicken Sie erneut (n=6), setzen Sie n auf 1 und springen Sie zur Position des ersten Bildes oUl.style.left = 0 + 'px'
            n = 1
        }
        let target = -n * Schritt
        Animation (oUl, Ziel)
 
    }

//Da das oben über document.querySelectorAll('.indicators li') erhaltene li in Form eines Pseudo-Arrays zurückgegeben wird, ist es notwendig, das Pseudo-Array zu durchlaufen, um das Klickereignis für jedes li zu binden for (let i = 0; i < oActives.length; i++) {
        oActives[i].onclick = Funktion () {
            //Stellen Sie den Stil des angeklickten Elements so ein, dass es hervorgehoben wird. setActive(i)
            //Und n den Wert von i zuweisen (entspricht der Aufzeichnung, dass aktuell das i-te Bild angezeigt werden soll)
            n = ich
            //Stellen Sie die Bewegungsdistanz ein let target = -n * step
            Animation (oUl, Ziel)
        }
    }
 
    // Kapseln Sie eine Funktion zum Hervorheben ein li function setActive(ind) {
        // Exklusives Denken anwenden: alles löschen und dann den Klassennamen separat festlegen für (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'aktiv'
    }

oLeft.onclick = Funktion () {
        N--
        wenn (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        //Rufen Sie die Funktion setActive () auf, um den Hervorhebungsstatus der n-ten Bildseitennummer setActive (n) zu ändern.
        let target = -n * Schritt
        Animation (oUl, Ziel)
 
    }
    oRechts.onclick = Funktion () {
        n++
        wenn (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        //Wenn n 5 ist, bedeutet das, dass wir das 6. Bild erreicht haben (das 6. Bild ist dasselbe wie das 1. Bild, wird aber für den gleitenden Übergang verwendet, um den Effekt eines plötzlichen Sprungs zu verhindern), also müssen wir die Seitenzahl auf 0 setzen (das erste Bild), um es hervorzuheben. //Hier verwenden wir einen ternären Ausdruck. Wenn n 5 ist, setze das 1. Bild zum Hervorheben, andernfalls setze das n-te Bild zum Hervorheben. n == 5 ? setActive(0) : setActive(n)
        let target = -n * Schritt
        Animation (oUl, Ziel)
 
    }

//Beim Laden der Seite muss zuerst der Timer eingeschaltet werden, sonst wird das Karussell nicht automatisch abgespielt. Es muss auf ein Move-In- und Move-Out-Ereignis gewartet werden, um den Timer zu starten timer = setInterval(function () {
            //Rufen Sie das Klickereignis oRight.onclick() auf, das an die rechte Schaltfläche gebunden ist
        }, 2000)
 
    //Wenn die Maus bewegt wird, zeige die linken und rechten Pfeile an und lösche den Timer oCarousel.onmouseover = function () {
        oChevron.style.display = "Block"
        Intervall löschen(Timer)
    }
 
    //Wenn die Maus herausbewegt wird, verstecke die linken und rechten Pfeile und starte den Timer oCarousel.onmouseout = function () {
        oChevron.style.display = "keine"
        Timer = Intervall festlegen(Funktion () {
            oRechts.onclick()
        }, 2000)
    }

* {
     Rand: 0;
     Polsterung: 0;
        }
 
        .Karussell {
            Breite: 500px;
            Höhe: 200px;
            Rand: 1px durchgehend rot;
            Rand: 100px automatisch;
            Position: relativ;
            Überlauf: versteckt;
        }
        .Karussell li {
            Listenstil: keiner;
        }
 
        /* Karussellinhalt*/
        .Karussell-Body {
            Breite: 3000px;
            Höhe: 200px;
            Position: absolut;
        }
        .Karussell-Body li {
            Listenstil: keiner;
            schweben: links;
            Breite: 500px;
            Höhe: 200px;
        }
 
        .Karussell-Body li img {
            Breite: 100 %;
            Höhe: 100%;
        }
 
 
        /* Linke und rechte Fokustasten */
        .Karussell .Chevron {
            Position: absolut;
            oben: 50 %;
            Höhe: 40px;
            Breite: 100 %;
            transformieren: verschiebeY(-50%);
            Anzeige: keine;
        }
 
        .Karussell .Chevron-links,
        .Karussell .Chevron-rechts {
            Breite: 40px;
            Höhe: 40px;
            Hintergrund: #000;
            Cursor: Zeiger;
            Textausrichtung: zentriert;
            Zeilenhöhe: 40px;
            Schriftgröße: 30px;
            Schriftstärke: fett;
            Farbe: #fff;
            Deckkraft: .3;
            Rand: 1px durchgezogen #fff;
        }
 
 
        .Karussell .chevron-links {
            schweben: links;
            Rand links: 10px;
        }
 
 
        .Karussell .Chevron-rechts {
            schweben: rechts;
            Rand rechts: 10px;
        }
 
 
        /* 5.2 Struktur des Karussellindikators*/
        .Karussell .Indikatoren {
            Position: absolut;
            rechts: 30px;
            unten: 20px;
        }
 
        .Karussell .Indikatoren li {
            schweben: links;
            Breite: 20px;
            Höhe: 20px;
            Rand rechts: 10px;
            Hintergrund: rgba(255, 255, 255, .8);
            Textausrichtung: zentriert;
            Zeilenhöhe: 20px;
            Cursor: Zeiger;
            Farbe: rgba(0, 0, 0, .5);
        }
 
        .Karussell .Indikatoren li.aktiv {
            Hintergrund: #09f;
            Farbe: rot;
 }

<div Klasse="Karussell">
        <!-- Karussellinhalt-->
        <ul Klasse="Karussell-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 Füge ein neues li hinzu, das mit dem ersten identisch ist-->
            <!-- <li><a href="#"><img src="./images/1.jpg" alt=""></a></li> -->
        </ul>
        <!-- Linke und rechte Fokustasten -->
        <div Klasse="chevron">
            <div class="chevron-left">&laquo;</div>
            <div class="chevron-right">&raquo;</div>
        </div>
        <!-- 5.1 Struktur des Karussellindikators-->
        <ol Klasse="Indikatoren">
            <li Klasse="aktiv">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
</div>

let oCarousel = document.querySelector('.carousel')
let oChevron = document.querySelector('.chevron')
let oLeft = document.querySelector('.chevron-left')
let oRight = document.querySelector('.chevron-right')
let oUl = document.querySelector('.carousel-body')
let oActives = document.querySelectorAll('.indicators li')
 
    sei n = 0
    sei Schritt = 500
    Timer einschalten
    Timer = Intervall festlegen(Funktion () {
            oRechts.onclick()
        }, 2000)
    oCarousel.onmouseover = Funktion () {
        oChevron.style.display = "Block"
        Intervall löschen(Timer)
    }
 
    oCarousel.onmouseout = Funktion () {
        oChevron.style.display = "keine"
        Timer = Intervall festlegen(Funktion () {
            oRechts.onclick()
        }, 2000)
    }
    oLeft.onclick = Funktion () {
        N--
        wenn (n == -1) {
            oUl.style.left = -2500 + 'px'
            n = 4
        }
        setActive(n)
        let target = -n * Schritt
        Animation (oUl, Ziel)
 
    }
    oRechts.onclick = Funktion () {
        n++
        wenn (n == 6) {
            oUl.style.left = 0 + 'px'
            n = 1
        }
        n == 5 ? setActive(0) : setActive(n)
        let target = -n * Schritt
        Animation (oUl, Ziel)
 
    }
    für (lass i = 0; i < oActives.length; i++) {
        oActives[i].onclick = Funktion () {
            setActive(i)
            n = ich
            let target = -n * Schritt
            Animation (oUl, Ziel)
        }
    }
 
    // Kapseln Sie eine Funktion zum Hervorheben ein li function setActive(ind) {
        für (let j = 0; j < oActives.length; j++) {
            oActives[j].className = ''
        }
        oActives[ind].className = 'aktiv'
    }
 
    Funktion Animation (Objekt, Ziel) {
        // Lösche den Timer clearInterval(obj.timer)
        obj.timer = setzeInterval(()=>{
            // Aktuelle Position des Elements lesen let curX=obj.offsetLeft
 
            //Definieren Sie eine Schrittweite let step=10
            // Bestimmen Sie die Bewegungsrichtung (vergleichen Sie die Größe der Zielposition mit der aktuellen Position) 
            wenn(Ziel<aktuellX){
                Schritt=-10
            }
            // Entsprechend der Beziehung zwischen der aktuellen Position, der Zielposition und der Schrittlänge, // Solange der Abstand zwischen der Zielposition und der aktuellen Position kleiner als die Schrittlänge ist, wird die Position des Elements direkt auf die Zielposition gesetzt if (Math.abs (target-curX) < Math.abs (step)) {
                obj.stil.links=Ziel+'px'
                Intervall löschen(obj.timer)
            }anders{
                //Berechnen Sie die Position des nächsten Schritts let nextX=curX+step
                // Weisen Sie obj.style.left die Position des nächsten Schritts zu.
                obj.style.left=nextX+'px'
            }
        },10)
}