Karusselleffekte mit JavaScript implementieren

In diesem Artikel wird der spezifische Code für JavaScript zur Erzielung des Karusselleffekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt

Implementierungscode:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Titel</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
        ul {
            Listenstil: keiner;
        }
        #Kasten {
            Rand: 30px automatisch;
            Breite: 590px;
            Höhe: 340px;
            Position: relativ;
        }
 
        #banner-list > li {
            Position: absolut;
            links: 0;
            rechts: 0;
            Deckkraft: 0;
            /*Übergangsanimation*/
            Übergang: Deckkraft 2 Sekunden;
        }
 
        #links rechts {
            Breite: 30px;
            Höhe: 60px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 60px;
            Schriftgröße: 24px;
            Farbe: rgba(255,255,255,0,7);
            Hintergrundfarbe: rgba(0,0,0,0,3);
            Position: absolut;
            oben: 50 %;
            Rand oben: -30px;
            Z-Index: 3;
        }
 
        #Rechts {
            rechts: 0;
        }
 
        #Tag-Liste {
            Breite: 130px;
            Position: absolut;
            links: 50%;
            unten: 8px;
            Rand links: -55px;
        }
 
        #tag-list > li {
            schweben: links;
            Breite: 18px;
            Höhe: 18px;
            Rand: 4px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 18px;
            Schriftgröße: 13px;
            Hintergrundfarbe: weiß;
            Rahmenradius: 9px;
            /*Übergangsanimation*/
            Übergang: Hintergrundfarbe, 1 Sekunde lang;
        }
    </Stil>
    <Skript>
        fenster.onload = Funktion (){
            //Tag_Liste und Kreisliste abrufen
            var tag_list = document.getElementById("tag-list");
            var Liste = Tag_Liste.Kinder;
 
            //1. Hol dir ul(banner_list) und alle li
            let banner_list = document.getElementById("banner-list");
            sei bannerLi = banner_list.children;
 
            //2. Standardmäßig das erste Banner anzeigen
            bannerLi[0].className = "aktuelles Banner"
            bannerLi[0].style.opacity = 1
            Liste[0].style.backgroundColor = "rot"
 
            //3. Der Index beginnt bei 0 und standardmäßig wird der erste angezeigt.
            //Anzahl gibt den Index der aktuell angezeigten Seite an. Let count = 0;
 
            //4. Klicken Sie auf >, um nach rechts zu wechseln. var right = document.getElementById("right");
            rechts.beiKlick = Funktion (){
                //4.1 Blende das erste Banner der aktuellen Seite ausLi[count].className = ""
                bannerLi[Anzahl].style.opacity = 0
                Liste[Anzahl].Stil.Hintergrundfarbe = "weiß"
 
                //4.2. Die Seitenzahl wird um 1 erhöht. Wenn die 6. Seite erreicht ist (Index = 5), wird zur ersten Seite gewechselt (Index = 0).
                wenn (++Anzahl == 5){
                    Anzahl = 0
                }
 
                //4.3 Aktuelle Seitenzahl zum Anzeigen des Banners festlegenLi[Anzahl].className = "current-banner"
                BannerLi[Anzahl].Stil.opacity = 1
                Liste[Anzahl].Stil.Hintergrundfarbe = "rot"
            }
 
            //Ähnlich wie rechts, ändern Sie die Bedingung var left = document.getElementById("left");
            links.beimKlick = Funktion (){
                //4.1 Blende das erste Banner der aktuellen Seite ausLi[count].className = ""
                bannerLi[Anzahl].style.opacity = 0
                Liste[Anzahl].Stil.Hintergrundfarbe = "weiß"
 
                //4.2. Die Seitenzahl wird um 1 verringert. Wenn die 0. Seite erreicht ist (Index = -1), wird zur 5. Seite gewechselt (Index = 4).
                wenn (--count == -1){
                    Anzahl = 4
                }
 
                //4.3 Aktuelle Seitenzahl zum Anzeigen des Banners festlegenLi[Anzahl].className = "current-banner"
                BannerLi[Anzahl].Stil.opacity = 1
                Liste[Anzahl].Stil.Hintergrundfarbe = "rot"
            }
 
            //Mausereignisse an alle Kreise binden for (let i = 0; i < list.length; i++) {
                Liste[i].onmouseenter = Funktion (){
                    //Kreisstil festlegen list[count].style.backgroundColor = "white"
                    Liste[i].style.backgroundColor = "rot"
                    //Den Stil des Bannerbilds festlegen bannerLi[count].className = ""
                    bannerLi[Anzahl].style.opacity = 0
                    bannerLi[i].className = "aktuelles Banner"
                    bannerLi[i].style.opacity = 1
                    //Setze die Anzahl auf i
                    Anzahl = i
                }
            }
        }
    </Skript>
</Kopf>
<Text>
    <div id="box">
        <ul id="Bannerliste">
            <li class="current-banner"><img src="banner-img/11.jpg" alt=""></li>
            <li><img src="banner-img/22.jpg" alt=""></li>
            <li><img src="banner-img/33.jpg" alt=""></li>
            <li><img src="banner-img/44.jpg" alt=""></li>
            <li><img src="banner-img/55.jpg" alt=""></li>
        </ul>
        <span id="left">&lt;</span>
        <span id="right">&gt;</span>
        <div>
            <ul id="Tag-Liste">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</body>
</html>

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:

JavaScript zur Implementierung eines einfachen Karusselldiagramms, umfassendste Codeanalyse (ES5)
Verwenden von js, um den Effekt eines Karussells zu erzielen
Natives js zum Erreichen eines einfachen Karusselleffekts
Verwenden von JavaScript zum Implementieren von Karusselleffekten
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
JavaScript zur Implementierung der umfassendsten Codeanalyse eines einfachen Karussells (objektorientiert ES6)

<<: mysql 8.0.19 winx64.zip Installations-Tutorial

>>: Remotedesktopverbindung zwischen Windows und Linux