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
Lassen Sie uns über den Unterschied zwischen Containern und Bildern in Docker sprechen
Was ist ein Spiegel? Ein Bild kann als Dateisyste...
Einfaches Beispiel zum Hinzufügen und Entfernen von HTML-Knoten
Einfaches Beispiel für das Hinzufügen und Entfern...
CSS-Schreibstandards und -Reihenfolge teilen [für alle empfohlen]
CSS-Schreibreihenfolge 1. Positionsattribute (Pos...
Fünf Richtlinien zum Schreiben von wartungsfreundlichem CSS-Code
1. Fügen Sie am Anfang des Stylesheets einen Komme...
Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen
1.Schreiben Sie davor: Als leichtgewichtige Virtu...
VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren
Willkommen zur vorherigen Canvas-Spielserie: 《VUE...
jQuery löst das Problem, dass das ursprüngliche Ereignis nach dem Hinzufügen von Elementen nicht ausgeführt wird
Schauen wir uns zunächst meinen Fehlercode an. ht...
Vue-Grundlagen-Tutorial: Bedingtes Rendering und Listen-Rendering
Inhaltsverzeichnis Vorwort 1.1 Funktion 1.2 So st...
Fallstricke bei der Installation der dekomprimierten Version von MySQL 5.7.20 (empfohlen)
Offizielle MySQL-Website: https://www.mysql.com/d...
Natives js zur Realisierung der Bild-Upload-Steuerung
In diesem Artikelbeispiel wird der spezifische Co...
Fallstudie zur dynamischen Datenbindung von this.$set in Vue
Ich finde, dass die Erklärung von this.$set im In...
WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}
Vorwort Bei der WeChat-Applet-Entwicklung (native...
Einige kleine Methoden, die häufig in HTML-Seiten verwendet werden
Fügen Sie das Tag <Head> hinzu <meta http...
Lösung für die Docker-Befehlsausnahme „Zugriff verweigert“
Installieren Sie Docker im Linux-System neu und g...
Versionsnummern in CSS- und JS-Links in HTML (Cache aktualisieren)
Hintergrund Suchen Sie in der Suchmaschine nach d...