基於jquery實現滑鼠滾輪驅動的圖片切換效果_jquery

jQuery可以製作出與Flash媲美的動畫效果，這點絕對毋庸置疑，本文將透過實​​例示範一個基於滑鼠滾輪驅動的圖片切換效果。

本例達到的效果：
滑鼠滾輪滾動時圖片進行切換。
支援鍵盤方向鍵實現圖片切換效果。
支援點擊圖片切換，支援點擊目前圖片連結。
進度條滑桿展示圖片圖片數量進度。
XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="基於jquery實現滑鼠滾輪驅動的圖片切換效果_jquery"><img src="/static/imghwm/default1.png"  data-src="images/loader.gif"  class="lazy" alt="基於jquery實現滑鼠滾輪驅動的圖片切換效果_jquery" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="/static/imghwm/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" /> 
 <img src="/static/imghwm/default1.png"  data-src="images/s2.jpg"  class="lazy" alt="image2" /> 
 <img src="/static/imghwm/default1.png"  data-src="images/s3.jpg"  class="lazy" alt="image3" /> 
 <img src="/static/imghwm/default1.png"  data-src="images/s4.jpg"  class="lazy" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 

div.demo是最外面的一層，包含了整個滾動效果所需的所有元素。 #imageflow是必需的，且與其內部包含的元素的ID名稱不能修改，如確實要修改，就要先定義或直接修改JS代碼了。 #基於jquery實現滑鼠滾輪驅動的圖片切換效果_jquery用來裝載一個載入動畫的圖片，當然你也可以直接寫成"基於jquery實現滑鼠滾輪驅動的圖片切換效果_jquery"或其他文字。 #captions用來顯示圖片的標題。 #images放置所要滾動切換的圖片，數量不限。 #scrollbar就是展示圖片的進度條。 #slider是一個滑桿，當切換圖片時，滑桿會滑動到對應的位置，以顯示圖片數量的位置。
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 } 
#基於jquery實現滑鼠滾輪驅動的圖片切換效果_jquery { margin:0; color:#fff; text-align:center } 
#基於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是整個效果實現的關鍵部分，如果CSS控制不好，將不會得到你要的效果。
.demo設定了寬度和高度，並設定position:relative和overflow:hidden，目的是為了讓滑鼠滑輪滾動作用的範圍限制在.demo裡。 #images設定了margin值，並對內部的img設定了相對定位。 #captions設定了用來顯示圖片標題的樣式，注意我使用半透明的圖片cap_bg.png作為背景圖片，在IE6下不支援透明的png圖片，所以你要進行相關的處理。接下來看滾動進度條和滑桿的設置，都運用的定位和深度設置，為何要這樣設置，只有大家去慢慢測試才會知道其中的奧妙。
引入jquery庫和滑動js檔案

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

所有的js動作都在imageflow.js完成，我只做了略微的改動，大家可以直接使用。
現在可以看到效果了吧。但還有問題：
圖片連接位址如何取得？
最終的效果應該是點擊目前展示的圖片時，會連接到一個頁面，用來展示該圖片相關的詳細資訊。那麼這個連結位址如何獲取，大概在第252行開始有這樣兩行程式碼：

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

可以看出，圖片的連結位址來自它的屬性：longdesc，當點擊圖片的時候，頁面將會跳到對應的地址頁面。好現在我們回到剛開始的XHTML程式碼，只需給每張圖片指定longdesc屬性，並將值設為對應的網頁位址。如：

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

現在，任務算是完成了。看完本例你會發現，你根本不需要些一句jquery程式碼，因為imageflow都已經完成了所有的操作程式碼。

以上就是本文的全部內容，希望對大家的學習有所幫助。