jQuery-Bildwechsel-Plug-in jquery.cycle.js Verwendung example_jquery

height: 210px; width: 500px;
background-color: #F79321;
ul#goods li img {
left: 0; > oben: 0;
Höhe: 210px; 🎜 >Breite: 180px;
Schriftgröße: 1,2em;
Farbe: #fff;
}
ul#goods li .author {
Rand links: 300px;
Breite: 180px;
Schriftstärke: fett; 🎜 >Hintergrundfarbe: #F79321;
Farbe: #fff;}


Diese Liste kann über das Cycle-Plugin in eine interaktive Diashow umgewandelt werden. Diese Konvertierung kann durch Aufrufen der .cycle()-Methode für den entsprechenden Container im DOM durchgeführt werden.




Code kopieren


Der Code lautet wie folgt:


$(document).ready(function( ) {
$('#goods').cycle();
});
Diese Syntax könnte nicht einfacher sein. Wie vor der Verwendung anderer integrierter jQuery-Methoden haben wir auch

.cycle() für ein jQuery-Objekt aufgerufen, das ein DOM-Element enthält. Auch wenn keine Parameter angegeben werden, kann .cycle() uns dabei helfen, die Konvertierungsarbeit abzuschließen. Dazu gehört die Änderung des Seitenstils

, sodass jeweils nur ein Listenelement angezeigt wird, und das anschließende Wechseln zum nächsten Listenelement alle 4 Sekunden durch Überblenden, wie in der Abbildung dargestellt

Parameter für die Plug-in-Methode angeben

Die Cycle()-Methode stellt uns viele Parameter zur Verfügung. Die spezifischen Funktionen der einzelnen Parameter werden hier nicht einzeln beschrieben. Bitte überprüfen Sie andere Dokumente

uns Sie können die Wiedergabegeschwindigkeit und die Animationsform zwischen den beiden Folien des Cycle-Plug-Ins ändern und die Auslösemethode des Folienwechsels ändern.
Die erste Timeout-Option wird verwendet, um die Anzahl der Millisekunden anzugeben, die zwischen dem Umschalten der Folien gewartet werden soll (2000), während die Geschwindigkeit die Anzahl der Millisekunden bestimmt, die zum Umschalten benötigt werden (200).

Wenn Pause auf „true“ gesetzt ist, wird die Diashow angehalten, wenn die Maus bewegt wird, was sehr nützlich ist, wenn die Diashow anklickbare Links enthält.

Der Zyklus hat einen sehr wichtigen Parameter: fx: Seine Funktion besteht darin, Spezialeffekte auszuwählen.

Enthält das folgende Special Effekte BlindX, Cover, CurtainX, FadeZoom, GrowX, ScrollUp, Shuffle, SlideX und so weiter.


Quellcode-Download