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

Cycle ist ein großartiges Plug-in zum Wechseln von jQuery-Bildern. Es bietet sehr gute Funktionen, mit denen Sie die Diashow-Funktion des Plug-ins einfacher nutzen können. Laden Sie das Cycle-Plug-in herunter und importieren Sie es zum Code, der es einführt. Nach der Einführung der jQuery-Hauptdatei.

Code kopieren Der Code lautet wie folgt:

script type= "text/javascript" src="js/jquery-1.8.0.min.js">

jquery.cycle.all.js ist im Democode.

Das Cycle-Plug-in kann auf jede Gruppe von Geschwisterelementen auf der Seite einwirken. Um dies zu demonstrieren, benötigen wir ein einfaches

HTML-Dokument. Das Dokument ist eine Liste mit Produktcovern und zugehörigen Informationen, die dem Hauptteil des HTML-Dokuments hinzugefügt werden kann:

Code kopieren Der Code lautet wie folgt:

• 🎜>< ;img src="img/lenovopad.jpg" alt="lenove pad" />
  Lenovo A3000(8GB/Weiß)
  >< div class="author">Entertainment-Tablet, Handy-Tablet

" alt="note3" />

Samsung GALAXY Note III

Das Produkt der dritten Generation von Samsung Note Serie, ausgestattet mit einem 5,7-Zoll-Full-HD-Bildschirm (Super AMOLED),
Auflösung ist 1080P (1920*1080 Pixel)

🎜>< ;img src="img/ipadair.png" alt="ipadair" />

iPad Air

Autor"> ;Das iPad Air ist erstaunlich dünn und leicht. Durch eine Reihe von Verbesserungen haben wir die Größe des iPad Air
im Vergleich zur vorherigen iPad-Generation um fast ein Viertel reduziert. Wenn Sie es jedoch in die Hand nehmen, werden Sie feststellen, dass es immer noch robust und langlebig ist.

Fügen Sie einige Stile zu CSS hinzu und es wird auf der Seite angezeigt




Code kopieren


Der Code lautet wie folgt:


html, body {
margin: 0;
padding: 0 ;

}

Schriftart: 62,5 % Verdana, Arial, serifenlos;

Hintergrund: #fff; } ul#goods { marge: 0; height: 210px; Überlauf: versteckt; ul#goods li {

margin: 0;

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.

Code kopieren Der Code lautet wie folgt:

$(document).ready(function( ) {
$('#goods').cycle({
timeout: 2000,
speed: 200,
pause: true
});

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.

Code kopieren Der Code lautet wie folgt:

$('#goods').cycle ({
fx:'fade',
timeout: 2000,
speed: 200,
pause: true
});

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


Quellcode-Download