Reines js, um den Effekt eines Karussells zu erzielen

 /*Standardmäßige innere und äußere Ränder eines Elements löschen*/
* {
    Rand: 0;
    Polsterung: 0
}
Körper{
    Breite: 1000px;
    Rand: 0 automatisch;
}
/*Entferne den Punkt vor der Liste*/
li {
    Listenstil: keiner;
}
/*Das Bild hat keinen Rand und entfernt die leere Lücke am unteren Rand des Bildes*/
img {
    Rand: 0; /*ie6*/
    vertikale Ausrichtung: Mitte;
}
/*Unterstreichung vom Link entfernen*/
A {
    Farbe: #666;
    Textdekoration: keine;
}

ein:schweben {
    Farbe: #e33333;
}
.fl {
    schweben: links;
}
.fr {
    schweben: rechts;
}
.Fokus {
    Position: relativ;
    Breite: 721px;
    Höhe: 455px;
    Hintergrundfarbe: lila;
    Überlauf: versteckt;
    Rand oben: 20px;
}

.fokus ul {
    Position: absolut;
    oben: 0;
    links: 0;
    Breite: 600 %;
}

.fokus ul li {
    schweben: links;
}

.Pfeil-l,
.Pfeil-r {
    Anzeige: keine;
    Position: absolut;
    oben: 50 %;
    Rand oben: -20px;
    Breite: 24px;
    Höhe: 40px;
    Hintergrund: rgba(0, 0, 0, .3);
    Textausrichtung: zentriert;
    Zeilenhöhe: 40px;
    Farbe: #fff;
    Schriftfamilie: „icomoon“;
    Schriftgröße: 18px;
    Z-Index: 2;
}

.Pfeil-r {
    rechts: 0;
}

.Kreis {
    Position: absolut;
    unten: 10px;
    links: 50px;
}

.Kreis li {
    schweben: links;
    Breite: 8px;
    Höhe: 8px;
    /*Hintergrundfarbe: #fff;*/
    Rand: 2px durchgezogen rgba(255, 255, 255, 0,5);
    Rand: 0 3px;
    Randradius: 50 %;
    /*Zeige die kleine Hand, wenn die Maus vorbeigeht*/
    Cursor: Zeiger;
}

.aktuell {
    Hintergrundfarbe: #fff;
}

<div Klasse="Fokus fl">
    <!-- Linke Taste -->
    <a href="javascript:;" Klasse="Pfeil-l Pfeil"> < </a>
    <!-- Rechte Taste -->
    <a href="javascript:;" Klasse="Pfeil-r Pfeil"> > </a>
    <!-- Kern-Scrollbereich -->
    <ul>
        <li>
            <a href="#" ><img src="images/focus.jpg" alt=""></a>
        </li>
        <li>
            <a href="#" ><img src="images/focus1.jpg" alt=""></a>
        </li>
        <li>
            <a href="#" ><img src="images/focus2.jpg" alt=""></a>
        </li>
        <li>
            <a href="#" ><img src="images/focus3.jpg" alt=""></a>
        </li>
    </ul>
    <!-- Kleiner Kreis -->
    <ol Klasse="Kreis">

    </ol>
</div>

window.addEventListener('laden', Funktion() {
    // 1. Holen Sie das Element var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var Fokus = document.querySelector('.focus');
    var Fokusbreite = Fokus.Offsetbreite;
    // 2. Wenn die Maus den Fokus passiert, werden die linke und rechte Maustaste angezeigt und ausgeblendet focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = "Block";
        arrow_r.style.display = "Block";
        Intervall löschen(Timer);
        timer = null; // lösche die Timervariable });
    Fokus.addEventListener('mouseleave', Funktion() {
        arrow_l.style.display = "keine";
        arrow_r.style.display = "keine";
        Timer = Intervall setzen(Funktion() {
            //Das Klickereignis manuell aufrufen arrow_r.click();
        }, 2000);
    });
    // 3. Dynamisch kleine Kreise generieren. Es gibt mehrere Bilder, also werde ich mehrere kleine Kreise generieren. var ul = focus.querySelector('ul');
    var ol = Fokus.QuerySelector('.Kreis');
    // Konsole.log(ul.children.length);
    für (var i = 0; i < ul.children.length; i++) {
        // Erstelle ein kleines li 
        var li = document.createElement('li');
        // Die Indexnummer des aktuellen kleinen Kreises über benutzerdefinierte Attribute aufzeichnen li.setAttribute('index', i);
        //Füge das kleine li in ol ein ol.appendChild(li);
        // 4. Exklusive Idee kleiner Kreise Wir können das Klickereignis direkt binden, während wir den kleinen Kreis generieren li.addEventListener('click', function() {
            // Alle beenden und alles kleine li löschen aktueller Klassenname für (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //Meine eigene aktuelle kleine Zeile hinterlassen. Aktuellen Klassennamen festlegen this.className = 'current';
            // 5. Klicken Sie auf den kleinen Kreis, um das Bild zu verschieben. Natürlich wird die UL verschoben. 
            // Die Bewegungsdistanz von ul ist die Indexnummer des kleinen Kreises multipliziert mit der Breite des Bildes. Beachten Sie, dass es sich um einen negativen Wert handelt. // Wenn wir auf ein kleines li klicken, erhalten wir die Indexnummer des aktuellen kleinen li. var index = this.getAttribute('index');
            // Wenn wir auf ein kleines li klicken, müssen wir die Indexnummer dieses li in num eingeben.  
            Zahl = Index;
            // Wenn wir auf ein kleines li klicken, müssen wir die Indexnummer dieses li angeben, um es einzukreisen  
            Kreis = Index;
            // Num = Kreis = Index;
            console.log(Fokusbreite);
            konsole.log(index);

            animieren(ul, -index * Fokusbreite);
        })
    }
    // Setzt den Klassennamen des ersten kleinen li in ol auf current
    ol.children[0].className = "aktuell";
    // 6. Klonen Sie das erste Bild (li) und platzieren Sie es am Ende von ul var first = ul.children[0].cloneNode(true);
    ul.appendChild(erstes);
    // 7. Klicken Sie auf die Schaltfläche rechts, um ein Bild zu scrollen. var num = 0;
    // Kreis steuert die Wiedergabe des kleinen Kreises var Kreis = 0;
    // Drosselklappenflagge var flag = true;
    arrow_r.addEventListener('klicken', function() {
        wenn (Flagge) {
            flag = false; // Drosselklappe schließen // Wenn wir das letzte kopierte Bild erreichen, muss unser UL schnell wieder auf 0 zurückgesetzt werden.
            wenn (num == ul.children.length - 1) {
                ul.style.left = 0;
                Zahl = 0;
            }
            Zahl++;
            animieren(ul, -num * Fokusbreite, Funktion() {
                flag = true; // Gas geben });
            // 8. Klicken Sie auf die Schaltfläche rechts, und der kleine Kreis ändert sich entsprechend. Sie können eine weitere Variable deklarieren, um die Wiedergabe des kleinen Kreises zu steuern circle++;
            // Wenn Kreis == 4, bedeutet dies, dass wir das Ende des geklonten Bildes erreicht haben und es wiederherstellen, wenn (Kreis == ol.children.length) {
                Kreis = 0;
            }
            //Funktion circleChange() aufrufen;
        }
    });

    // 9. Methode der linken Maustaste arrow_l.addEventListener('click', function() {
        wenn (Flagge) {
            Flagge = falsch;
            wenn (num == 0) {
                Num = ul.children.length - 1;
                ul.style.left = -num * Fokusbreite + 'px';

            }
            Nummer--;
            animieren(ul, -num * Fokusbreite, Funktion() {
                Flagge = wahr;
            });
            // Klicken Sie auf die Schaltfläche links und der kleine Kreis ändert sich entsprechend. Sie können eine weitere Variable deklarieren, um die Wiedergabe des kleinen Kreises zu steuern. circle--;
            // Wenn Kreis < 0, was das erste Bild anzeigt, sollte der kleine Kreis in den vierten kleinen Kreis geändert werden (3)
            // wenn (Kreis < 0) {
            // Kreis = ol.children.length – 1;
            // }
            Kreis = Kreis < 0? ol.children.length - 1 : Kreis;
            //Funktion circleChange() aufrufen;
        }
    });

    Funktion Kreisänderung() {
        // Lösche zuerst die aktuellen Klassennamen der verbleibenden kleinen Kreise for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        //Den aktuellen Klassennamen des aktuellen kleinen Kreises belassen ol.children[circle].className = 'current';
    }
    // 10. Karussell automatisch abspielen var timer = setInterval(function() {
        //Das Klickereignis manuell aufrufen arrow_r.click();
    }, 2000);

})

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);
}