js native Karussell-Plugin-Produktion

<div id="banner"></div>

<Skript>
        Bannerbereich(document.getElementById("Banner"),[
            {imgUrl:"Bild",
            link:"Sprunglink"
        },
            {imgUrl:"Bild",
            link:"Sprunglink"
        },
            {imgUrl:"Bild",
            link:"Sprunglink"
        }
        ])
</Skript>

// Zwei Parameter, der erste ist der Folienbereich, der zweite ist die Konfigurationsfunktion bannerArea(areaDom, options) {
    var imgArea = document.createElement("div");
    var numberArea = document.createElement("div");
    var curIndex = 0; //Die erste Diashow var changeTimer = null;
    var changeDuration = 1000; //Intervall var timer = null;
    
    initImg();//Erstelle einen Bereich um das Bild anzuzeigen initNumber();//Erstelle einen Bereich um das Badge anzuzeigen setStatus();//Setze den Status autoChange();//Automatisch wechseln //Das Folgende ist eine lokale Funktion //Erstelle ein Bild und stelle den Stil ein function initImg() {
        imgArea.style.width = "100 %";
        imgArea.style.height = "100 %";
        imgArea.style.display = "flexibel";
        imgArea.style.overflow = "versteckt";
        für (let i = 0; i < options.length; i++) {
            var obj = Optionen[i];
            var img = document.createElement("img");
            img.src = obj.imgUrl;
            img.style.width = "100%";
            img.style.height = "100%";
            img.style.margin = "0";
            img.addEventListener("klicken", function () {
                Standort.href = Optionen[i].link;
            })
            imgArea.appendChild(img);
        }
        imgArea.addEventListener("mouseenter", function () {
            Intervall löschen(Timer ändern);
            ÄnderungsTimer = null;
        })
        imgArea.addEventListener("mouseleave", Funktion () {
            autoChange();
        })
        areaDom.appendChild(imgArea);
    }
    //Hochgestellte Elemente erstellen und Stile festlegen function initNumber() {
        numberArea.style.textAlign = "zentriert";
        numberArea.style.marginTop = "-25px";
        für (let i = 0; i < options.length; i++) {
            var sp = document.createElement("span");
            sp.style.width = "12px";
            sp.style.height = "12px";
            sp.style.background = "hellgrau";
            sp.style.display = "Inline-Block";
            sp.style.margin = "0 7px";
            sp.style.borderRadius = "50 %";
            sp.style.cursor = "Zeiger";
            sp.addEventListener("klicken", Funktion () {
                aktuellerIndex = i;
                setStatus();
            })
            AnzahlBereich.AnhängenKind(sp);
        }
        BereichDom.appendChild(AnzahlBereich);
    }
 
    //Setze den Status des Eckbereichs Funktion setStatus() {
        //Setze die Hintergrundfarbe des Kreises für (var i = 0; i < options.length; i++) {
            wenn (i === aktuellerIndex) {
                //Setze die Hintergrundfarbe auf die ausgewählte ZahlArea.children[i].style.background = "rgb(222 57 57)";
            } anders {
                //Nicht ausgewählt numberArea.children[i].style.background = "lightgray";;
            }
 
        }
        //Bild anzeigen var start = parseInt(imgArea.children[0].style.marginLeft);
        var end = aktuellerIndex * -100;
        var dis = Ende - Start;
        var Dauer = 500;
        var Geschwindigkeit = dis / Dauer;
        wenn (Zeitgeber) {
            Intervall löschen(Timer);
        }
        Timer = Intervall festlegen(Funktion () {
            Start += Geschwindigkeit * 20;
            imgArea.children[0].style.marginLeft = start + "%";
            wenn (Math.abs(Ende - Start) < 1) {
                imgArea.children[0].style.marginLeft = Ende + "%";
                Intervall löschen(Timer);
            }
        }, 20)
    }
    //Automatisch umschalten Funktion autoChange() {
        wenn (Zeitgeber ändern) {
            zurückkehren;
        }
        changeTimer = Intervall festlegen(Funktion () {
            wenn (aktuellerIndex === Optionen.Länge - 1) {
                aktuellerIndex = 0;
            } anders {
                aktuellerIndex++;
            }
            setStatus();
        }, Dauer ändern)
    }
 
}