Native JavaScript-Karussell-Implementierungsmethode

In diesem Artikel wird die Implementierungsmethode des JavaScript-Karussells zu Ihrer Information erläutert. Der spezifische Inhalt ist wie folgt

Screenshots der Effekte:

Hinweis: Sie können die Größe des Div- Containers und den Bildpfad selbst festlegen und der Browser kann sich nach dem Hinzufügen von img- und a- Tags anpassen.

Erstellen Sie einen Bildordner zum Speichern von Bildern

Schreiben Sie HTML-Text

<Text>
//Der Bildpfad kann von Ihnen selbst geändert werden <div id="outer">
       <ul id="Bildliste">
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
           <li><img src="image/7.jpg" alt=""></li>
           <li><img src="image/6.jpg" alt=""></li>
           <li><img src="image/8.jpg" alt=""></li>
       </ul>
       <div id="nav">
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
           <a href="JavaScript:;"></a>
       </div>
   </div>
</body>

CSS-Stile hinzufügen

<Stil>
* {
   Rand: 0px;
   Polsterung: 0px;
}

/* Äußerer Rahmencontainer */
#äußere {
   Breite: 1555px;
   Höhe: 600px;
   Hintergrundfarbe: #bfa;
   Rand: 100px automatisch;
   Position: relativ;
   /* Verstecken */
   Überlauf: versteckt;

}

/* Liste der Bilder */
#Bildliste {
   /* Flexbox-Layout */
   Anzeige: Flex;
   Listenstil: keiner;
   Position: relativ;
   /* Layoutrichtung */
   /* flex-direct5on: Zeile; */
   /*Verschiebe ein Bildpixel um 1552 Pixel*/
   /* rechts: 1552px; */


}

#imglist li {
   Rand: 10px 10px;
}

/* Navigationspunkt */
#nav {
   Anzeige: Flex;
   Listenstil: keiner;
   Position: absolut;
   unten: 50px;
   /* 1555/2 - 6*(20+25)/2 */
   /* links: 642px; */

}

#nav ein {
   Breite: 25px;
   Höhe: 25px;
   Rand: 0px 10px;
   Hintergrundfarbe: rgb(223, 129, 52);
   Rahmenradius: 5px;
}

/* Mausbewegungseffekt*/
#nav a:hover {
   Hintergrundfarbe: rgb(215, 107, 224);
}
</Stil>

Implementieren von Funktionen mit JavaScript

<Skripttyp="text/javascript">
    fenster.onload = Funktion () {

    // Äußere Rahmeneigenschaften abrufen var outer = document.getElementById("outer");
    // Imglist-Attribute abrufen var imglist = document.getElementById("imglist");
    // Bildattribute abrufen var imgArr = document.getElementsByTagName("img");

    // Holen Sie sich das a-Attribut var allA = document.getElementsByTagName('a');
    //Navigationspunkt abrufen var nav = document.getElementById("nav");
    //Navigationspunkt auf die Mitte setzen nav.style.left = (outer.offsetWidth / 2) – (allA.length * 45 / 2) + "px";

    //Standardanzeigeindex var index = 0;
    allA[index].style.backgroundColor = "rgb(215, 107, 224)";
    // Timer für Navigationspunkt wechseln var timer = setInterval(function () {
        //Schleifenanzeige index = (++index) % allA.length;
        //Hintergrundfarbe des Navigationspunkts festlegen allA[index].style.backgroundColor = "rgb(215, 107, 224)";
        SetzeA();
        //Bilder automatisch wechseln//Bilder ändern, ein Bild verschiebt sich 1552px nach links
        imglist.style.transition = "rechts 1,5 s"
        imglist.style.right = (Index * 1552) + "px";
       

    }, 1800);

    //Klicken Sie auf den Hyperlink, um das Bild anzuzeigen für (var i = 0; i < allA.length; i++) {
        //Jedem Hyperlink einen Index hinzufügen allA[i].index = i;
        //Binde Klickantwortfunktion für jeden Hyperlink allA[i].onclick = function () {

            imgIndex = dieser.index;
            //Überschreibe die aktuelle Position des Navigationspunkts index = imgIndex;
            SetzeA();
            //Ändern Sie das Bild, verschieben Sie die Pixel eines Bildes um 1552 Pixel nach links
            imglist.style.transition = "rechts .85s"
            imglist.style.right = (imgIndex * 1552) + "px";


            //Ändere das ausgewählte a-Tag allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";
        };
    }
    //Stil einer Funktion löschen SetA() {
        für (var i = 0; i < allA.length; i++) {
            alleA[i].style.backgroundColor = "";
        }
        //Setze allA[index].style.backgroundColor = "rgb(215, 107, 224)" für die aktuelle Navigation;
    }
};

</Skript>

Vollständiger Code

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Karussellbild</title>

    <Stil>
        * {
            Rand: 0px;
            Polsterung: 0px;
        }

        /* Äußerer Rahmencontainer */
        #äußere {
            Breite: 1555px;
            Höhe: 600px;
            Hintergrundfarbe: #bfa;
            Rand: 100px automatisch;
            Position: relativ;
            /* Verstecken */
            Überlauf: versteckt;

        }

        /* Liste der Bilder */
        #Bildliste {
            /* Flexbox-Layout */
            Anzeige: Flex;
            Listenstil: keiner;
            Position: relativ;
            /* Layoutrichtung */
            /* flex-direct5on: Zeile; */
            /*Verschiebe ein Bildpixel um 1552 Pixel*/
            /* rechts: 1552px; */


        }

        #imglist li {
            Rand: 10px 10px;
        }

        /* Navigationspunkt */
        #nav {
            Anzeige: Flex;
            Listenstil: keiner;
            Position: absolut;
            unten: 50px;
            /* 1555/2 - 6*(20+25)/2 */
            /* links: 642px; */

        }

        #nav ein {
            Breite: 25px;
            Höhe: 25px;
            Rand: 0px 10px;
            Hintergrundfarbe: rgb(223, 129, 52);
            Rahmenradius: 5px;
        }

        /* Mausbewegungseffekt*/
        #nav a:hover {
            Hintergrundfarbe: rgb(215, 107, 224);
        }
    </Stil>
    <Skripttyp="text/javascript">
        fenster.onload = Funktion () {

            // Äußere Rahmeneigenschaften abrufen var outer = document.getElementById("outer");
            // Imglist-Attribute abrufen var imglist = document.getElementById("imglist");
            // Bildattribute abrufen var imgArr = document.getElementsByTagName("img");

            // Holen Sie sich das a-Attribut var allA = document.getElementsByTagName('a');
            //Navigationspunkt abrufen var nav = document.getElementById("nav");
            //Navigationspunkt auf die Mitte setzen nav.style.left = (outer.offsetWidth / 2) – (allA.length * 45 / 2) + "px";

            //Standardanzeigeindex var index = 0;
            allA[index].style.backgroundColor = "rgb(215, 107, 224)";
            // Timer für Navigationspunkt wechseln var timer = setInterval(function () {
                index = (++index) % allA.länge;
                //Hintergrundfarbe des Navigationspunkts festlegen allA[index].style.backgroundColor = "rgb(215, 107, 224)";
                SetzeA();
                //Bilder automatisch wechseln//Bilder ändern, ein Bild verschiebt sich 1552px nach links
                imglist.style.transition = "rechts 1,5 s"
                imglist.style.right = (Index * 1552) + "px";

                //Schleifenanzeige}, 1800);


            //Klicken Sie auf den Hyperlink, um das Bild anzuzeigen für (var i = 0; i < allA.length; i++) {

                //Jedem Hyperlink einen Index hinzufügen allA[i].index = i;
                //Binde Klickantwortfunktion für jeden Hyperlink allA[i].onclick = function () {

                    imgIndex = dieser.index;
                    //Überschreibe die aktuelle Position des Navigationspunkts index = imgIndex;
                    SetzeA();
                    //Ändern Sie das Bild, verschieben Sie die Pixel eines Bildes um 1552 Pixel nach links
                    imglist.style.transition = "rechts .85s"
                    imglist.style.right = (imgIndex * 1552) + "px";


                    //Ändere das ausgewählte a-Tag allA[imgIndex].style.backgroundColor = "rgb(215, 107, 224)";

                };

            }
            //Stil einer Funktion löschen SetA() {
                für (var i = 0; i < allA.length; i++) {
                    alleA[i].style.backgroundColor = "";
                }

                allA[index].style.backgroundColor = "rgb(215, 107, 224)";


            }


        };


    </Skript>
</Kopf>

<Text>

    <div id="außen">
        <ul id="Bildliste">
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
            <li><img src="image/7.jpg" alt=""></li>
            <li><img src="image/6.jpg" alt=""></li>
            <li><img src="image/8.jpg" alt=""></li>
        </ul>
        <div id="nav">
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
            <a href="JavaScript:;"></a>
        </div>
    </div>
</body>
</html>

Funktionsverwendung:

Erstellen Sie einen Timer:

setzeIntervall(Funktion () {},30)

Legen Sie den abgerundeten Rand fest:

Rahmenradius: 5px;

offsetWidth horizontale Breite + linke und rechte Polsterung + linker und rechter Rand
offsetHeight vertikale Höhe + obere und untere Polsterung + oberer und unterer Rand
clientWidth horizontale Breite + linke und rechte Polsterung
clientHeight vertikale Höhe + obere und untere Polsterung

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

js, um den kompletten Code des Karussells zu implementieren
Beispielcode zur Implementierung eines Karussells mit nativem JS
js, um den Effekt der Unterstützung des Karussell-Bildbeispiels mit Schiebeschalter für Mobiltelefone zu erzielen
Einfacher Code zur Implementierung eines JS-Karusselldiagramms
js, um zu erreichen, klicken Sie auf die linke und rechte Schaltfläche, um Bilder abzuspielen
JS realisiert automatischen Karusselleffekt (adaptive Bildschirmbreite + Gleiten des Touchscreens des Mobiltelefons)
Verwenden Sie HTML+JS+CSS, um einen Seitenkarusselleffekt zu erzielen (Beispielerklärung)
JS implementiert nahtlosen Karussellcode für links und rechts
Natives js, um einen Endlosschleifen-Karusselleffekt zu erzielen
js realisiert den gleitenden Karusselleffekt von links nach rechts

<<: Erläuterung der HTTPS-Prinzipien

>>: Detaillierte Analyse der MySQL-Indizes