JQuery-Mausrad, um einen Bildwechsel zu erreichen

Dieses Mal werde ich Ihnen das JQuery-Mausrad vorstellen, um einen Bildwechsel zu erreichen. Was sind die Vorsichtsmaßnahmen für das JQuery-Mausrad, um einen Bildwechsel zu erreichen?

Der in diesem Beispiel erzielte Effekt: Das Bild wechselt, wenn das Mausrad gescrollt wird. Unterstützen Sie die Pfeiltasten der Tastatur, um einen Bildwechseleffekt 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.

Alle Elemente . #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. #loading wird verwendet, um ein Ladeanimationsbild zu laden. Natürlich können Sie auch direkt „loading“ oder anderen Text schreiben. #captionsWird 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

<p class="demo"> 
 <p id="imageflow"> 
 <p id="loading"><img src="images/loader.gif" alt="loading" /></p> 
 <p id="captions"></p> 
 <p id="images"> 
 <img src="images/s1.jpg" alt="image1" /> 
 <img src="images/s2.jpg" alt="image2" /> 
 <img src="images/s3.jpg" alt="image3" /> 
 <img src="images/s4.jpg" alt="image4" /> 
 </p> 
 <p id="scrollbar"> 
 <p id="slider"></p> 
 </p> 
 </p> 
</p>

CSS
ist ein wichtiger Teil des gesamten Effekts, wenn das CSS nicht gut kontrolliert wird Holen Sie sich, was Sie wollen. .demo

legt die Breite und Höhe fest und legt position:relative und overflow:hidden fest, um den Umfang des Mausrad-Scrolleffekts auf die .demo zu beschrä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 in die JQuery-Bibliothek und das Verschieben von JS-Dateien

.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 } 
#loading { margin:0; color:#fff; text-align:center } 
#loading 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 }

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 bleiben noch Fragen: Wie erhalte ich die Bildverbindungsadresse?

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 diese Linkadresse? Ab Zeile 252 gibt es zwei Codezeilen:

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

Es ist ersichtlich, dass die Linkadresse des Bildes aus seinem Attribut stammt: longdesc. die Seite Es wird zur entsprechenden Adressseite gesprungen. 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:

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

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. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:

Implementierung zum Wechseln der Tab-Scroll-Navigation (mit Code)

JQuery-Hintergrundbildwechsel (mit Code) Code)

Das obige ist der detaillierte Inhalt vonJQuery-Mausrad, um einen Bildwechsel zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!