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:
|
<<: XHTML-Erste-Schritte-Tutorial: Verwenden des Frame-Tags
Artikel empfehlen
Vue-CLI - Aufzeichnung der Schritte zur mehrseitigen Verzeichnisverpackung
Seitenverzeichnisstruktur Beachten Sie, dass Sie ...
CSS- und HTML- und Front-End-Technologie-Schichtendiagramm
Die Beziehung zwischen Javascript und DOM ist seh...
Erfahren Sie, wie Sie eine MySQL-Datenbank auf dem Mac installieren
Laden Sie MySQL für Mac herunter: https://downloa...
Beispieltest MySQL-Enumerationstyp
Bei der Entwicklung eines Projekts stößt man häuf...
Detaillierte Erläuterung der Verwendung der Vue3-Statusverwaltung
Inhaltsverzeichnis Hintergrund Bereitstellen / In...
HTML-Tabelle_Powernode Java Academy
Um eine Tabelle in HTML zu zeichnen, verwenden Si...
Div adaptive Höhe füllt automatisch die verbleibende Höhe
Szenario 1: HTML: <div Klasse="äußere&quo...
Detaillierte Erklärung der Fallstricke beim Mischen von npm und cnpm
Inhaltsverzeichnis Ursache Grund Einführung in NP...
js, um einen einfachen Kalendereffekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Detailliertes Tutorial zum Bereitstellen von Apollo mit Docker
1. Einleitung Ich werde hier nicht näher auf Apol...
Schritte zum Erstellen eines Vite-Projekts
Inhaltsverzeichnis Vorwort Was macht Yarn Create?...
Beschreibung der HTML-Meta-Viewport-Attribute
Was ist ein Ansichtsfenster? Mobile Browser platz...
Informationen zur Verwendung und Vorsichtsmaßnahmen von Promises in Javascript (empfohlen)
1. Beschreibung des Versprechens Promise ist ein ...
Zusammenfassung von 4 Methoden des Div+CSS-Layouts, um eine 2-Enden-Ausrichtung von CSS zu erreichen
Das Div+CSS-Layout zur Erzielung einer 2-Enden-Au...
Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards
Die goldene Regel Befolgen Sie immer die gleichen...