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.

JS-Implementierung des Karussell-Karussell-Falls

Beispielcode mit SCSS in Uni-App

Praktischer Bericht zur Lösung des MySQL Deep Paging-Problems

So stellen Sie Daten mit Binlog in MySQL 5.7 wieder her

Vue implementiert die vollständige Auswahlfunktion

Installations- und Nutzungsanalyse von Portainer, einem visuellen UI-Verwaltungstool für Docker

JavaScript-Kreisdiagrammbeispiel

Mehrere Möglichkeiten zum Einfügen von SVG in HTML-Seiten

MySql fügt Daten erfolgreich ein, meldet aber [Err] 1055 Fehlerlösung

Einführung in die MySQL-Entsperr- und Sperrtabelle

Führen Sie die Schritte zum Zurücksetzen des Root-Benutzerkennworts in MySQL8 aus

Artikel empfehlen

Beispielcode für die Verwendung von CSS cross-fade() zum Erzielen eines halbtransparenten Hintergrundbildeffekts

Confluence mit Docker bereitstellen

Detaillierte Erklärung der MySQL/Java-Server-Unterstützung für Emoji und Problemlösung

Das neueste, äußerst detaillierte grafische Tutorial zum Herunterladen und Installieren virtueller VMware-Maschinen

Detaillierte Erklärung des Konzepts, Prinzips und der Verwendung von MySQL-Triggern

Detaillierte Erläuterung der Wissenspunkte zum Umschalten zwischen MySQL MGR-Einzelmaster- und Multimastermodus

Implementierung von JavaScript zum Herunterladen und Hochladen verknüpfter Bilder

Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte

So erkennen Sie, ob es sich beim aktuellen Browser um einen Headless-Browser mit JavaScript handelt

Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads

So verwenden Sie nginx, um eine angegebene Schnittstelle (URL) zu blockieren

Detaillierter Prozess zum Erstellen von MongoDB und MySQL mit Docker-Compose

Die Kombination und der Unterschied zwischen ENTRYPOINT und CMD im Dockerfile

Lösungen zur Verarbeitung und Reparatur historischer Linux-Images