Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery

jQuery kann mit Flash vergleichbare Animationseffekte erzeugen. Daran besteht absolut kein Zweifel. In diesem Artikel wird anhand eines Beispiels ein Bildwechseleffekt demonstriert.

Der in diesem Beispiel erzielte Effekt:
Das Bild wechselt, wenn mit dem Mausrad gescrollt wird.
Unterstützt die Pfeiltasten der Tastatur, um Bildwechseleffekte zu erzielen.
Unterstützt das Klicken zum Wechseln von Bildern und das Klicken auf den aktuellen Bildlink.
Der Fortschrittsbalken-Schieberegler zeigt den Fortschritt der Anzahl der Bilder an.
XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery"><img src="/static/imghw/default1.png"  data-src="images/loader.gif"  class="lazy" alt="Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="/static/imghw/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" /> 
 <img src="/static/imghw/default1.png"  data-src="images/s2.jpg"  class="lazy" alt="image2" /> 
 <img src="/static/imghw/default1.png"  data-src="images/s3.jpg"  class="lazy" alt="image3" /> 
 <img src="/static/imghw/default1.png"  data-src="images/s4.jpg"  class="lazy" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 

div.demo ist die äußerste Ebene und enthält alle Elemente , die für den gesamten Scrolleffekt benötigt werden. #imageflow ist erforderlich und der ID-Name des darin enthaltenen Elements kann nicht geändert werden. Wenn Sie es wirklich ändern möchten, müssen Sie zuerst den JS-Code definieren oder direkt ändern. #Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery wird verwendet, um ein Ladeanimationsbild zu laden. Natürlich können Sie auch direkt „Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery“ oder anderen Text schreiben. #captions wird verwendet, um die Bildunterschrift anzuzeigen. #BilderPlatzieren Sie die Bilder, die Sie scrollen möchten, und wechseln Sie. Die Anzahl ist unbegrenzt. #scrollbar ist ein Fortschrittsbalken, der Bilder anzeigt. #slider ist ein Schieberegler. Beim Wechseln von Bildern wird der Schieberegler an die entsprechende Position verschoben, um die Anzahl der Bilder anzuzeigen.
CSS

.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery { margin:0; color:#fff; text-align:center } 
#Implementierung eines mausradgesteuerten Bildwechseleffekts basierend auf jquery_jquery img { position:ralative; margin:0 } 
#captions { position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000 } 
#scrollbar { position:relative; top:-100px; height:2px; z-index:10001 background:#abcd3a url(images/scroll.gif) repeat-x; 
} 
#slider { position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(images/bar.gif) no-repeat; z-index:10002 } 

CSS ist der Schlüssel zur Erzielung des gesamten Effekts. Wenn CSS nicht gut kontrolliert wird, erhalten Sie nicht den gewünschten Effekt.
.demo legt die Breite und Höhe fest und legt position:relative und overflow:hidden fest, um den Umfang des Scrollens mit dem Mausrad zur .demo einzuschränken. #images legt den Randwert und die relative Positionierung des internen Bildes fest. #captions legt den Stil fest, der zum Anzeigen des Bildtitels verwendet wird. Beachten Sie, dass ich das halbtransparente Bild cap_bg.png verwende, da transparente PNG-Bilder unter IE6 nicht unterstützt werden. Daher ist eine entsprechende Verarbeitung erforderlich. Schauen wir uns als nächstes die Einstellungen des Scroll-Fortschrittsbalkens und des Schiebereglers an. Sie alle verwenden Positionierungs- und Tiefeneinstellungen. Nur wenn Sie sie langsam testen, werden Sie das Geheimnis kennen.
Einführung der JQuery-Bibliothek und der Sliding-JS-Datei

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script> 

Alle js-Aktionen sind in imageflow.js abgeschlossen. Ich habe nur geringfügige Änderungen vorgenommen und jeder kann es direkt verwenden.
Jetzt können Sie den Effekt sehen. Aber es gibt immer noch ein Problem:
Wie erhalte ich die Bildlink-Adresse?
Der Endeffekt sollte sein, dass Sie, wenn Sie auf das aktuell angezeigte Bild klicken, zu einer Seite weitergeleitet werden, auf der detaillierte Informationen zum Bild angezeigt werden. Wie erhält man also diese Linkadresse? Ab Zeile 252 gibt es zwei Codezeilen:

image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; } 

Es ist ersichtlich, dass die Linkadresse des Bildes aus seinem Attribut stammt: longdesc. Wenn auf das Bild geklickt wird, springt die Seite zur entsprechenden Adressseite. Nun, da wir wieder bei dem XHTML-Code sind, mit dem wir begonnen haben, müssen wir nur noch jedem Bild das longdesc-Attribut zuweisen und den Wert auf die entsprechende Webseitenadresse setzen. Zum Beispiel:

<img src="/static/imghw/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" longdesc="#" /> 

Jetzt ist die Aufgabe abgeschlossen. Nachdem Sie dieses Beispiel gelesen haben, werden Sie feststellen, dass Sie überhaupt keinen JQuery-Code benötigen, da Imageflow bereits alle Operationscodes abgeschlossen hat.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.