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

Detaillierte Erklärung der Anwendung und des Unterschieds zwischen Filterattribut und Hintergrundfilter in CSS

Es gibt einige Unterschiede zwischen Filter und H...

Beheben Sie das Problem, dass Mysql5.7.17 unter Windows nicht installiert und gestartet werden kann

Installieren Sie MySQL zum ersten Mal auf Ihrem C...

Detaillierte Erläuterung der Beispiele für CSS-Gewichtswerte (Kaskadierung)

•Es gibt viele Selektoren in CSS. Was passiert, w...

So zeigen Sie den Speicherort von MySQL-Datendateien an

Wir haben möglicherweise eine Frage: Nachdem wir ...

Detaillierte Erklärung der JavaScript-Datentypen

Inhaltsverzeichnis 1. Literale 1.1 Numerische Lit...

Einführung in Abfragebefehle für gespeicherte MySQL-Prozeduren

Wie unten dargestellt: Wählen Sie den Namen aus m...

Detaillierte Erklärung der 4 Codes, die die Website schwarz, weiß und grau machen

Das Erdbeben in Wenchuan am 12. Mai 2008 in Sichu...

Detailliertes Tutorial zur Installation von Nginx 1.16.0 unter Linux

Da ich in letzter Zeit mit Linux herumgespielt ha...

Detaillierter Prozess der NTP-Serverkonfiguration unter Linux

Inhaltsverzeichnis 1. Umgebungskonfiguration 1.NT...

Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...

Beispielcode für die Verwendung von js zur Implementierung gleichzeitiger Ajax-Anfragen, um die Anzahl der Anfragen zu begrenzen

Problembeschreibung: Wenn die Anzahl der asynchro...

Node.js löst das Problem verstümmelter chinesischer Zeichen in Clientanforderungsdaten

Node.js löst das Problem verstümmelter chinesisch...

SQL-Implementierung LeetCode (185. Top drei der höchsten Gehälter in der Abteilung)

[LeetCode] 185. Die drei höchsten Gehälter der Ab...

HTML-Tutorial: Das Optgroup-Element verstehen

Wählen Sie die Kategorieauswahl. Nach Tests könne...

Docker erstellt Cluster-MongoDB-Implementierungsschritte

Vorwort Aufgrund der Geschäftsanforderungen des U...