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>

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 }

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

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

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!