JavaScript-Implementierung eines Karussellbeispiels

<Stil>
       *{
           Rand: 0;
           Polsterung: 0;
           Box-Größe: Rahmenbox;
       }
       Körper{
           Schriftgröße: 14px;
           Schriftfamilie: Arial, Helvetica, serifenlos;
       }
       .Schieberegler-Box{
          Breite: 1226px;
          Höhe: 460px;
          Rand: 10px automatisch;
          Überlauf: versteckt;
          Position: relativ;
       }
      .slider-box .bilder a{
        Breite: 100 %;
        Höhe: 460px;
        Position: absolut;
        links: 0;
        oben: 0;
        Deckkraft: 0;
        Übergang: alles 2er;
       }
 
       .slider-box .bilder a.active{
           Deckkraft: 1;
       }
 
       .slider-box .images ein Bild{
           Breite: 100 %;
           Höhe: 100%;
           Anzeige: Block;
       }
       .Schieberegler-Box .nav{
           Position: absolut;
           links: 0;
           oben: 195px;
           Breite: 100 %;
           /* Hintergrundfarbe: rot; */
           Polsterung: 0 10px;
           /* Höhe: 100px; */
       }
       .slider-box .nav a{
           Hintergrundbild: URL (img/icons.png);
           Breite: 41px;
           Höhe: 69px;
           Anzeige: Inline-Block;
           Hintergrundwiederholung: keine Wiederholung;
       }
       .slider-box .nav .prev{
           Hintergrundposition: -84px 0;
       }
       .slider-box .nav .prev:hover{
           Hintergrundposition: 0 0;
       }
       .slider-box .nav .nächste{
           Hintergrundposition: -125px 0;
           schweben: rechts;
       }
       .slider-box .nav .next:hover{
           Hintergrundposition: -42px 0;
       }
       .slider-box .pages{
           Position: absolut;
           rechts: 20px;
           unten: 25px;
           Schriftgröße: 0;
           Breite: 1186px;
           Textausrichtung: zentriert;
           /* Hintergrundfarbe: rebeccapurple; */
       }
       .slider-box .pages .dot{
           Anzeige: Inline-Block;
           Breite: 10px;
           Höhe: 10px;
           Randradius: 50 %;
           Hintergrundfarbe: rgba(0,0,0,0,4);
           Rand rechts: 10px;
       }
       .slider-box .pages .dot:hover{
        Hintergrundfarbe: gelb;
       }
       .slider-box .pages .dot.active{
        Hintergrundfarbe: gelb;
       }
 
</Stil>

<div Klasse="Schieberegler-Box">
        <div Klasse="Bilder">
            <!-- Wenn Sie in Zukunft ein beliebiges Bild anzeigen möchten, fügen Sie einfach eine aktive Klasse hinzu -->
            <a href="#" class="aktiv">
                <img src="img/1.jpg" alt="">
            </a>
            <a href="">
                <img src="img/2.jpg" alt="">
            </a>
            <a href="">
                <img src="img/3.jpg" alt="">
            </a>
            <a href="">
                <img src="img/4.jpg" alt="">
            </a>
            <a href="">
                <img src="img/5.jpg" alt="">
            </a>
        </div>
        <div Klasse="nav">
            <a href="javascript:;" class="prev" title="Zurück"></a>
            <a href="javascript:;" class="next" title="Weiter"></a>
        </div>
        <div Klasse="Seiten">
            <a href="javascript:;" class="dot aktiv"></a>
            <a href="javascript:;" Klasse="Punkt"></a>
            <a href="javascript:;" Klasse="Punkt"></a>
            <a href="javascript:;" Klasse="Punkt"></a>
            <a href="javascript:;" Klasse="Punkt"></a>
        </div>
</div>

<Skript>
        // Timer zum Umschalten der Bildfunktion var images = document.querySelectorAll('.images a')
        var index = 0 //Definiere den Index des abzuspielenden Bildes var pages = document.querySelectorAll(".dot")
        var prev = document.querySelector(".prev")
        var nächstes = document.querySelector(".next")
        // Bilder entsprechend dem Indexwert wechseln // Das a-Tag der Bilder suchen und die aktive Klassenfunktion showImage(idx){ hinzufügen
            Bilder.fürJedes(Funktion(v,i){
                // idx = 1
                // i = 0 1 2 3 4
                wenn(i===idx){
                  v.classList.add('aktiv')
                //Steuern Sie die entsprechenden Punkt-Highlight-Seiten[i].classList.add("active")
 
                }anders{
                    v.classList.remove('aktiv')
                    Seiten[i].classList.remove("aktiv")
                }
            })
        }
    // Bild anzeigen(3)
 
    vorherige.onclick = function(){
        wenn(index===0){
            index = Bilder.Länge - 1 // 4
        }anders{
            Index = Index - 1
        }
        Bild anzeigen(index)
    }
    weiter.onclick = Funktion(){
        wenn(index===bilder.länge-1){
            Index = 0
        }anders{
            Index+=1
        }
        Bild anzeigen(index)
    }
    var Timer = Intervall festlegen(Funktion(){
        // Der Timer steuert das Umschalten der Bilder und hat die gleiche Funktion wie das Klicken auf das nächste Bild // Rufe die Klickoperation des nächsten Bildes auf next.click() // Simuliere die Klickoperation des nächsten },3000)
</Skript>