JS-Implementierung des Karussell-Karussell-Falls

In diesem Artikelbeispiel wird der spezifische JS-Code zur Implementierung des Karussellkarussells zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Wirkung:

Die Anordnung der einzelnen Bilder erfolgt symmetrisch zur Mitte. Die Bildgrößen und Transparenz sind unterschiedlich, aber der Stil der symmetrischen Bilder ist derselbe und erzeugt einen dreidimensionalen Karusselleffekt.

Bild mit dynamischem Karusselleffekt:

Schauen wir uns zunächst den Code an:

<!DOCTYPE html>
<html>
<head lang="de">
    <meta charset="UTF-8">
    <title>Karussell-Diashow</title>
    <link rel="stylesheet" href="css/css.css" />
</Kopf>
<Text>
<div Klasse="wrap" id="wrap">
    <div Klasse="Folie" id="Folie">
        <ul>
            <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li>
            <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li>
        </ul>
        <div Klasse="Pfeil" id="Pfeil">
            <a href="javascript:void(0);" Klasse="prev" id="arrLeft"></a>
            <a href="javascript:void(0);" Klasse="nächste" id="arrRight"></a>
        </div>
    </div>
</div>
</body>
<Skript>
    //Definieren Sie ein Array und verwenden Sie die absolute Positionierung, um die Positionen der fünf li festzulegen var config = [
        {
            Breite: 400,
            oben: 20,
            links: 50,
            Deckkraft: 0,2,
            zIndex: 2
        },
        {
            Breite: 600,
            oben: 70,
            links: 0,
            Deckkraft: 0,8,
            zIndex: 3
        },
        {
            Breite: 800,
            oben: 100,
            links: 200,
            Deckkraft: 1,
            zIndex: 4
        },
        {
            Breite: 600,
            oben: 70,
            links: 600,
            Deckkraft: 0,8,
            zIndex: 3
        },
        {
            Breite: 400,
            oben: 20,
            links: 750,
            Deckkraft: 0,2,
            zIndex: 2
        }
    ];
    //Seitenladeereignis window.onload = function () {
        var flag = true; //Angenommen, alle Animationen sind abgeschlossen. //Die Bilder sind verteilt. var list = my$("slide").getElementsByTagName("li");
        Funktion assgin() {
            für (var i=0;i<Liste.Länge;i++) {
                //Jedes li so einstellen, dass die breite Transparenzebene links oben die angegebene Zielposition erreicht animate(list[i],config[i],function () {
                    Flagge = wahr;
                });
            }
        }
        assgin();
 
        //Setze das Klick-Event für den Button //Das rechte Button-Bild rotiert im Uhrzeigersinn und das erste Element des Arrays wird ans Ende gesetzt/*
             pop() löscht das letzte Element push() fügt ein Element am Ende hinzu shift() löscht das erste Element unshift() fügt ein Element am Anfang des Arrays hinzu*/
        mein$("arrRight").onclick = function(){
            wenn (Flagge) {
                Flagge = falsch;
                config.push(config.shift());
                assgin(); //Neu zuweisen }
        };
        //Das linke Buttonbild rotiert gegen den Uhrzeigersinn und das letzte Element des Arrays wird an den Anfang gesetzt my$("arrLeft").onclick = function(){
            wenn (Flagge) {
                Flagge = falsch;
                config.unshift(config.pop());
                assgin(); //Neu zuweisen }
        };
 
        //Wenn die Maus in die linken und rechten Fokus-Divs gelangt, wird my$("wrap").onmouseover = function () { angezeigt.
            animieren(mein$("Pfeil"),{"Deckkraft":1});
        };
        //Wenn die Maus das linke oder rechte Fokus-Div verlässt, wird es ausgeblendet my$("wrap").onmouseout = function () {
            animieren(mein$("Pfeil"),{"Deckkraft":0});
        };
    };
 
    //Element per ID abrufen Funktion my$(id) {
        gibt document.getElementById(id) zurück;
    }
 
    //Den Wert eines beliebigen Stilattributs eines beliebigen Elements abrufen function getAttrValue(element,attr) {
        gibt element.currentStyle?element.currentStyle[attr] zurück: window.getComputedStyle(element,null)[attr]||0;
    }
 
    // Animationsfunktion animate(element,json,fn) {
        Intervall löschen(element.timeId);
        element.timeId=setInterval(Funktion () {
            var flag = true; // Angenommen, das Ziel wurde erreicht für (var attr in json) {
                if(attr=="opacity"){//Bestimmen Sie, ob das Attribut undurchsichtig ist
                    var aktuell = getAttrValue(element,attr)*100;
                    //Wie viele Schritte jedes Mal zurückgelegt werden sollenvar target=json[attr]*100;//Weisen Sie den Wert direkt einer Variablen zu, der folgende Code muss nicht geändert werdenvar step=(target-current)/10;//(target-current)/10
                    Schritt=Schritt>0?Math.ceil(Schritt):Math.floor(Schritt);
                    Strom = Strom + Schritt;
                    Element.Stil[attr]=aktuell/100;
                }else if(attr=="zIndex"){//Beurteilen, ob das Attribut zIndex ist
                    Element.Stil[attr]=json[attr];
                }else{//Gewöhnliche Attribute//Aktuelle Position abrufen----getAttrValue(element,attr) ruft den Stringtyp ab var current= parseInt(getAttrValue(element,attr))||0;
                    //Wie viele Schritte jeweils zurückgelegt werden sollenvar target=json[attr];//Direkt einer Variablen zuweisen, der folgende Code muss nicht geändert werdenvar step=(target-current)/10;//(target-current)/10
                    Schritt=Schritt>0?Math.ceil(Schritt):Math.floor(Schritt);
                    Strom = Strom + Schritt;
                    Element.Stil[attr]=aktuell+"px";
                }
                wenn(aktuell!=Ziel){
                    flag=false; //Wenn das Zielergebnis nicht erreicht wird, ist es false
                }
            }
            if(flag){//Das Ergebnis ist wahr
                Intervall löschen(element.timeId);
                if(fn){//Wenn der Benutzer die Callback-Funktion fn(); übergibt, //Rufen Sie sie direkt auf,
                }
            }
            Konsole.log("Ziel:"+Ziel+"aktuell:"+aktuell+"Schritt:"+Schritt);
        },10);
    }
 
</Skript>
</html>

css.css-Stil:

@Zeichensatz "UTF-8";
/*Reset initialisieren*/
Blockzitat, Textkörper, Schaltfläche, dd, dl, dt, Feldsatz, Formular, h1, h2, h3, h4, h5, h6, hr, Eingabe, Legende, li, ol, p, pre, td, Textbereich, th, ul {Rand: 0; Polsterung: 0}
Textkörper, Schaltfläche, Eingabe, Auswahl, Textbereich {Schriftart: 12px/1,5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", serifenlos; Farbe: #666;}
ol,ul{Listenstil:keine}
ein {text-decoration:none}
Feldsatz, Bild {Rand: 0; vertikal ausrichten: oben;}
a,Eingabe,Schaltfläche,Auswählen,Textbereich{Umriss:keine;}
ein,Knopf{Cursor:Zeiger;}
 
.wickeln{
    Breite: 1200px;
    Rand: 100px automatisch;
}
.gleiten {
    Höhe: 500px;
    Position: relativ;
}
.Folie li{
    Position: absolut;
    links: 200px;
    oben: 0;
}
.slide li img{
    Breite: 100 %;
}
.Pfeil{
    Deckkraft: 0;
}
.vorherige,.nächste{
    Breite: 76px;
    Höhe: 112px;
    Position: absolut;
    oben: 50 %;
    Rand oben: -56px;
    Hintergrund: URL(../images/prev.png) keine Wiederholung;
    Z-Index: 99;
}
.nächste{
    rechts:0;
    Hintergrundbild: URL (../images/next.png);
}

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 Karussell-Effekt
JavaScript zur Implementierung einer Karussell-Diashow
js, um den Effekt eines Karussellkarussells zu erzielen
JS implementiert Karussell-Diashow
js, um einen Karusselleffekt zu erzielen
Native js, um Karussell-Karussell-Effekt zu erzielen
JS realisiert den Effekt der Bildrotation im Karussellstil
Natives JS zur Implementierung eines Plug-Ins zur Bildrotation im Karussell-Stil
Natives js zum Erzielen eines Karusselleffekts

<<: XHTML-Erste-Schritte-Tutorial: Verwenden des Frame-Tags

>>: Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.

Lernen wir JavaScript objektorientiert kennen

JS-Implementierung des Karussell-Karussell-Falls

Lernen wir JavaScript objektorientiert kennen

Zwei Implementierungen des Front-End-Routings von Vue-Router

Lösung für das Problem des MySQL-Master-Slave-Switch-Kanals

html+css+js zur Realisierung der Funktion der Fotovorschau und des Bildhochladens

Tägliches automatisches Backup der MySQL-Datenbank mit mysqldump in Centos7 schreiben

So erstellen Sie MySQL-Indizes richtig

So stoppen Sie die CSS-Animation mittendrin und behalten die Haltung bei

Ist MySQL eine relationale Datenbank?

Detaillierte Erläuterung der Implementierung der Nginx-Prozesssperre

VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren

Artikel empfehlen

Verwendung des Linux-Befehls chkconfig

Einführung in gängige Befehle und Tastenkombinationen in Linux

Vue implementiert die Funktion zum Aufrufen der Handykamera und des Albums

Sublime Text - Empfohlene Methode zum Festlegen von Browser-Tastenkombinationen

Detaillierte Erklärung, ob die MySQL-Datenbank Fremdschlüsseleinschränkungen verwenden soll

Implementierung eines Karussells mit nativem JavaScript

Lösung für FEHLER 1366 bei der Eingabe von Chinesisch in MySQL

Detaillierte Erklärung des JQuery-Selektors

So installieren Sie mehrere mysql5.7.19 (tar.gz)-Dateien unter Linux

SSM VUE Axios Detaillierte Erklärung

Detaillierte Erläuterung der MySQL-Datenbankisolationsebene und des MVCC

CSS-Benennung: BEM, Scoped CSS, CSS-Module und CSS-in-JS erklärt

Detaillierte Erklärung zur Konfiguration des Keepalived-Protokolls auf einem anderen Pfad in CentOS7

Hinweise zum Zeichengerätetreiber des Linux-Kernel-Gerätetreibers

HTML-Multimediaanwendung: Einfügen von Flash-Animationen und Musik in Webseiten