JavaScript imitiert Xiaomi-Karusselleffekt

JavaScript imitiert Xiaomi-Karusselleffekt

Dieser Artikel ist eine selbstgeschriebene Nachahmung des Xiaomi-Karussells, bei dem es sich um ein Karussell handelt, bei dem die Transparenz geändert wird. Als Anfänger ist die Schrift möglicherweise nicht sehr gut. Wenn etwas Unvernünftiges vorhanden ist, weisen Sie bitte darauf hin und korrigieren Sie es. Alle Codes befinden sich unten. Es gibt viele sich wiederholende Schreibmethoden. Wenn ich Zeit habe, werde ich die wiederholten Codes zusammenfassen.

Informationen zum Animationseffekt mit Transparenzverlauf

Beispielsweise wandelt delayOpacity(OliArray[pre],0,-0.1); die Transparenz des OliArray[pre]-Objekts auf 0 um, mit einer Geschwindigkeit von 0,1

Funktion delayOpacity(Objekt,Ziel,Geschwindigkeit){
        Intervall löschen(Timer);
        Timer = Intervall festlegen(Funktion(){
            var alt = getComputedStyle(obj,null)['Opazität']; 
            var newVal = +old + +speed; //+ dient zum Konvertieren des Strings in einen Zahlentyp if(parseInt(speed)>0 && newVal>=target){
                neuerWert = 1;
            }
            wenn(parseInt(Geschwindigkeit)<0 && neuerWert<=Ziel){
                neuerWert = 0;
            }
            obj.style.opacity = newVal; //Weisen Sie der Transparenz des Objekts jedes Mal einen neuen Wert zu, um einen Farbverlaufseffekt zu erzielen, if (newVal==target) {
                clearInterval(timer); //Wenn der Transparenzwert mit dem Transparenzwert im Ziel übereinstimmt, schalte den Timer aus}
        },100);
    }

Über die Methode der automatischen Rotation

Mein Karussell hat vier Folien, aber ich habe fünf Bilder geschrieben. Die fünfte ist die gleiche wie die erste. Der Zweck besteht darin, die Transparenzkonvertierung sinnvoller zu gestalten und nicht plötzlich von der letzten zur ersten zu wechseln. Die globale Variable „next“ stellt die Folie dar, zu der gewechselt wird, und „pre“ stellt die aktuelle Folie dar.

Funktion autoPlay(){
        autoTimer = setzeIntervall(Funktion(){
            weiter++;
            vor++;
            nächstes %= OliArray.Länge;
            vor %= OliArray.length;
            wenn(vor==OliArray.length-1){
                vor = 0;
            }
            für (let i=0;i<OliArray.length;i++){
                wenn(i!=nächste){
                    OliArray[i].style.zIndex = 0;
                    /*Lösen Sie das Problem, dass beim Klicken auf die ersten paar Bilder das automatische Karussell nicht wechselt.
                    Da die späteren Bilder über den früheren Bildern angezeigt werden, wird bei der Wiedergabe des dritten Bildes
                    Nach dem Klicken auf das erste Bild wird das Karussell automatisch angezeigt, da das dritte Bild über dem zweiten Bild angezeigt wird. Es gibt keinen Animationseffekt vom ersten zum zweiten Bild und das Bild stoppt immer beim dritten Bild. Daher sollte die Ebene des anzuzeigenden Bildes auf 1 und die Ebenen anderer Bilder auf 0 * / gesetzt werden.
                }
                wenn(i!=vor)
                    OliArray[i].style.opacity = 0;
                wenn(i!=OliArray.length-1){
                    PointerArray[i].className = ""; //Beim Klicken werden alle anderen aktivierten Stile außer dem angeklickten Ursprung gelöscht}
            }
            OliArray[nächstes].style.zIndex=1;
            delayOpacity(OliArray[pre],0,-0.1); //Ändere die Transparenz des vorherigen Bildes von 1 auf 0
            delayOpacity(OliArray[next],1,0.1); //Ändere die Transparenz des anzuzeigenden Bildes von 0 auf 1
            wenn(nächstes==OliArray.length-1) {
                nächstes = 0;
                OliArray[next].style.opacity = 1; //Wenn das letzte Bild angezeigt wird, sofort zum ersten wechseln, anstatt so zu tun, als würde man zum ersten rotieren, da die Augen des Benutzers nicht so hell sind}
            PointerArray[next].className = "aktiv";
        },3000);
    }

Klicken Sie dazu auf das vorherige Bild

vorherigesBanner.onclick = function(){
        //Lösche den Timer des automatischen Karussells clearInterval(autoTimer);
        pre = next; //Pre ist das Bild, zu dem ursprünglich gewechselt wurde next = next-1>=0? next-1:OliArray.length-2; //next ist das vorherige Bild, zu dem gewechselt werden soll (let i=0;i<OliArray.length;i++){
            wenn(i!=nächste){
                OliArray[i].style.zIndex = 0;
            }
            wenn(i!=vor)
                OliArray[i].style.opacity = 0;
            wenn(i!=OliArray.length-1){
                ZeigerArray[i].className = "";
            }
        }
        OliArray[next].style.zIndex = 1;
        delayOpacity(OliArray[pre],0,-0.1);
        delayOpacity(OliArray[next],1,0.1);
        wenn(nächstes==OliArray.length-1) {
            nächstes = 0;
            OliArray[nächstes].style.opacity = 1;
        }
        PointerArray[next].className = "aktiv";
        vor = nächstes - 1;
        //Automatisches Karussell einschalten autoPlay();
    }

Über Click Next

Es ist ein bisschen wie das automatische Karussell, aber es gibt keinen Timer (ich denke, ich kann es in eine Paketfunktion schreiben und später ändern)

nextBanner.onclick = Funktion(){
        //Lösche den Timer des automatischen Karussells clearInterval(autoTimer);
        weiter++;
        vor++;
        nächstes %= OliArray.Länge;
        vor %= OliArray.length;
        wenn(vor==OliArray.length-1){
            vor = 0;
        }
        für (let i=0;i<OliArray.length;i++){
            wenn(i!=nächste){
                OliArray[i].style.zIndex = 0;
            }
            wenn(i!=vor)
                OliArray[i].style.opacity = 0;
            wenn(i!=OliArray.length-1){
                ZeigerArray[i].className = "";
            }
        }
        OliArray[next].style.zIndex = 1;
        delayOpacity(OliArray[pre],0,-0.1);
        delayOpacity(OliArray[next],1,0.1);
        wenn(nächstes==OliArray.length-1) {
            nächstes = 0;
            OliArray[nächstes].style.opacity = 1;
        }
        PointerArray[next].className = "aktiv";
        //Automatisches Karussell einschalten autoPlay();
    }

Über das Klicken auf einen bestimmten Ursprung und das Wechseln zum Bild dieses Ursprungs

für (let i=0;i<PointerArray.length;i++){
        ZeigerArray[i].onclick = function(){
            //Lösche den Timer des automatischen Karussells clearInterval(autoTimer);
            für (let j=0;j<OliArray.length;j++){
                wenn(j!=i){
                    OliArray[j].style.zIndex = 0;
                }
                wenn(j!=nächste)
                    OliArray[j].style.opacity = 0;
                wenn(j!=OliArray.length-1){
                    ZeigerArray[j].className = "";
                }
            }
            OliArray[i].style.zIndex=1;
            VerzögerungOpacity(OliArray[next],0,-0.1);
            VerzögerungOpacity(OliArray[i],1,0.1);
            PointerArray[i].className = "aktiv";
            vor = i - 1 == 0? OliArray.length-1:i-1;
            nächstes = i;
            //Automatisches Karussell einschalten autoPlay();
        }
    }

HTML-Teil

<div Klasse="banner-wapper">
        <div Klasse="Container">
            <div Klasse="Banner">
                <ul Klasse="Bildliste">
                    <li>
                        <a href="#">
                            <img src="./img/1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/3.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/4.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="./img/1.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <div Klasse="Zeiger">
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                    <a href="javascript:;"></a>
                </div>
                <div Klasse="vorherige-nächste">
                    <a class="prev" href="javascript:;"></a>
                    <a class="nächste" href="javascript:;"></a>
                </div>
            </div>
        </div>
</div>

CSS-Teil

.Banner{
    Position: relativ;
    Höhe: 460px;
}
.banner .img-list li{
    Position: absolut;
    Deckkraft: 0;
}
.banner-wapper .banner ein img{
    Breite: 1226px;
    Höhe: 460px;
    vertikale Ausrichtung: oben;
}
.banner .img-list li:nth-child(1){
    Deckkraft: 1;
}
.Zeiger{
    Z-Index: 2;
    Position: absolut;
    rechts: 30px;
    unten: 20px;
}
.Zeiger a{
    schweben: links;
    Breite: 6px;
    Höhe: 6px;
    Rand: 2px rgba(255, 255, 255, 0,4) durchgezogen;
    Box-Größe: Inhaltsbox;
    Rand: 0,4px;
    Randradius: 50 %;
    Hintergrund: rgba(0, 0, 0, 0,4);
}
.Zeiger a:hover,
.Zeiger .aktiv{
    Rahmenfarbe: rgba (0, 0, 0, 0,4);
    Hintergrundfarbe: rgba(255, 255, 255, 0,4);
}
.vorheriges-nächstes a{
    Breite: 41px;
    Höhe: 69px;
    Position: absolut;
    oben: 0;
    unten: 0;
    Rand: automatisch 0;
    Hintergrundbild: URL (../img/icon-slides.png);
}
.vorheriges-nächstes .vorheriges{
    Z-Index: 2;
    links: 234px;
    Hintergrundposition: -84px 50 %;
}
.vorheriges-nächstes .vorheriges:hover{
    Hintergrundposition: 0 0;
}
.vorheriges-nächstes .nächstes{
    Z-Index: 2;
    rechts: 0;
    Hintergrundposition: -125px 50 %;
}
.vorheriges-nächstes .nächstes:hover{
    Hintergrundposition: -42px 50 %;
}

js-Teil

fenster.onload = funktion(){
    var Oul = document.getElementsByClassName("img-list")[0];
    var OliArray = Oul.getElementsByTagName("li");
    var Zeiger = document.getElementsByClassName("Zeiger")[0];
    var PointerArray = pointer.getElementsByTagName("a");
    var nextBanner = document.getElementsByClassName("next")[0];
    var prevBanner = document.getElementsByClassName("prev")[0];

    var Timer, AutoTimer, Weiter = 0, Vorher = OliArray.Länge-1;
    PointerArray[0].className = "aktiv";
    
    autoPlay();
    // Klicken Sie auf das Karussell for(let i=0;i<PointerArray.length;i++){
        ZeigerArray[i].onclick = function(){
            //Lösche den Timer des automatischen Karussells clearInterval(autoTimer);
            für (let j=0;j<OliArray.length;j++){
                wenn(j!=i){
                    OliArray[j].style.zIndex = 0;
                }
                wenn(j!=nächste)
                    OliArray[j].style.opacity = 0;
                wenn(j!=OliArray.length-1){
                    ZeigerArray[j].className = "";
                }
            }
            // konsole.log(vorher,nächstes,i)
            OliArray[i].style.zIndex=1;
            delayOpacity(OliArray[next],0,-0.1);
            VerzögerungOpacity(OliArray[i],1,0.1);
            PointerArray[i].className = "aktiv";
            vor = i - 1 == 0? OliArray.length-1:i-1;
            nächstes = i;
            //Automatisches Karussell einschalten autoPlay();
        }
    }

    // Klicken Sie auf das nächste Banner nextBanner.onclick = function(){
        //Lösche den Timer des automatischen Karussells clearInterval(autoTimer);
        weiter++;
        vor++;
        nächstes %= OliArray.Länge;
        vor %= OliArray.length;
        wenn(vor==OliArray.length-1){
            vor = 0;
        }
        für (let i=0;i<OliArray.length;i++){
            wenn(i!=nächste){
                OliArray[i].style.zIndex = 0;
            }
            wenn(i!=vor)
                OliArray[i].style.opacity = 0;
            wenn(i!=OliArray.length-1){
                ZeigerArray[i].className = "";
            }
        }
        OliArray[next].style.zIndex = 1;
        delayOpacity(OliArray[pre],0,-0.1);
        delayOpacity(OliArray[next],1,0.1);
        wenn(nächstes==OliArray.length-1) {
            nächstes = 0;
            OliArray[nächstes].style.opacity = 1;
        }
        PointerArray[next].className = "aktiv";
        //Automatisches Karussell einschalten autoPlay();
    }
    //Klicken Sie auf das vorherige Banner prevBanner.onclick = function(){
        //Lösche den Timer des automatischen Karussells clearInterval(autoTimer);
        vor = nächstes;
        nächstes = nächstes-1>=0? nächstes-1:OliArray.Länge-2;
        für (let i=0;i<OliArray.length;i++){
            wenn(i!=nächste){
                OliArray[i].style.zIndex = 0;
            }
            wenn(i!=vor)
                OliArray[i].style.opacity = 0;
            wenn(i!=OliArray.length-1){
                ZeigerArray[i].className = "";
            }
        }
        OliArray[next].style.zIndex = 1;
        delayOpacity(OliArray[pre],0,-0.1);
        delayOpacity(OliArray[next],1,0.1);
        wenn(nächstes==OliArray.length-1) {
            nächstes = 0;
            OliArray[nächstes].style.opacity = 1;
        }
        PointerArray[next].className = "aktiv";
        vor = nächstes - 1;
        //Automatisches Karussell einschalten autoPlay();
    }

    // Automatische Karussellfunktion autoPlay(){
        autoTimer = setzeIntervall(Funktion(){
            weiter++;
            vor++;
            nächstes %= OliArray.Länge;
            vor %= OliArray.length;
            wenn(vor==OliArray.length-1){
                vor = 0;
            }
            für (let i=0;i<OliArray.length;i++){
                wenn(i!=nächste){
                    OliArray[i].style.zIndex = 0;
                }
                wenn(i!=vor)
                    OliArray[i].style.opacity = 0;
                wenn(i!=OliArray.length-1){
                    ZeigerArray[i].className = "";
                }
            }
            OliArray[nächstes].style.zIndex=1;
            delayOpacity(OliArray[pre],0,-0.1);
            delayOpacity(OliArray[next],1,0.1);
            wenn(nächstes==OliArray.length-1) {
                nächstes = 0;
                OliArray[nächstes].style.opacity = 1;
            }
            PointerArray[next].className = "aktiv";
        },3000);
    }
    Funktion delayOpacity(Objekt,Ziel,Geschwindigkeit){
        Intervall löschen(Timer);
        Timer = Intervall festlegen(Funktion(){
            var alt = getComputedStyle(obj,null)['Opazität'];
            // console.log(getComputedStyle(obj,null)['Opazität'])
            var newVal = +alt + +Geschwindigkeit;
            // console.log(Objekt,neuerWert)
            wenn(parseInt(Geschwindigkeit)>0 && neuerWert>=Ziel){
                neuerWert = 1;
            }
            wenn(parseInt(Geschwindigkeit)<0 && neuerWert<=Ziel){
                neuerWert = 0;
            }
            obj.style.opacity = neuerWert;
            // console.log(getComputedStyle(obj,null)['Opazität'])
            wenn (neuerWert == Ziel) {
                Intervall löschen(Timer);
            }
        },100);
    }
}

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-Implementierung eines Karussellbeispiels
  • 3 einfache Möglichkeiten, Karusselleffekte mit JS zu erzielen
  • js, um einen 3D-Karusselleffekt zu erzielen
  • Reines js, um den Effekt eines Karussells zu erzielen
  • Natives JS zur Implementierung eines atmenden Karussells
  • js, um einen Karusselleffekt zu erzeugen
  • Über die Implementierung des JavaScript-Karussells

<<:  Detailliertes Tutorial zur Installation von Nacos in Docker und zur Konfiguration der Datenbank

>>:  Verwenden Sie MySQL, um die von der URL zurückgegebenen HTTP-GET-Anforderungsdaten aufzuzeichnen

Artikel empfehlen

Java-Programmierung zum Schreiben eines äußerst praktischen JavaScript-Tabellen-Plugins

Inhaltsverzeichnis Auswirkungen Dokumentation ers...

Mehrere praktische Szenarien zur Implementierung der Ersetzungsfunktion in MySQL

REPLACE Syntax REPLACE(String,from_str,to_str) Da...

So installieren Sie Elasticsearch und Kibana in Docker

Elasticsearch erfreut sich derzeit großer Beliebt...

Zusammenfassung der Unterschiede zwischen MySQL-Primärschlüssel und eindeutigem Schlüssel

Was ist ein Primärschlüssel? Ein Primärschlüssel ...

Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen

Vor kurzem wurde WeChat von Apple gezwungen, eine...

So migrieren Sie das Datenverzeichnis in Docker

Inhaltsverzeichnis Datenträgernutzung anzeigen Da...

Zusammenfassung der Shell-Methode zum Bestimmen, ob eine Variable leer ist

So ermitteln Sie, ob eine Variable in der Shell l...

CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

Popup-Fenster werden in der tatsächlichen Entwick...

Beispielcode zur Implementierung von Neon-Button-Animationseffekten mit CSS3.0

Heute zeige ich Ihnen einen Neon-Button-Animation...

Detaillierte Erklärung des Unterschieds zwischen tinyint und int in MySQL

Frage: Was ist der Unterschied zwischen int(1) un...

Detaillierte Erklärung der MySQL-Binlog-Verwendung

binlog ist eine binäre Protokolldatei, die alle D...

Detaillierte Erläuterung der Verwendung von MySQL Explain (Analyseindex)

EXPLAIN zeigt, wie MySQL Indizes verwendet, um Au...

Zusammenfassung der vier Möglichkeiten zur Einführung von CSS (Sharing)

1. Inline-Referenz: Wird direkt auf dem Etikett v...

Der Kernprozess der NodeJS-Verarbeitung einer TCP-Verbindung

Vor ein paar Tagen habe ich mit einem Freund etwa...

So richten Sie eine VSCode-Remoteverbindung zum Server-Docker-Container ein

Inhaltsverzeichnis Ziehen Sie das Bild Ausführen ...