jQuery可以制作出與Flash媲美的動(dòng)畫(huà)效果，這點(diǎn)絕對(duì)毋庸置疑，本文將通過(guò)實(shí)例演示一個(gè)基于鼠標(biāo)滾輪驅(qū)動(dòng)的圖片切換效果。

本例實(shí)現(xiàn)的效果：
鼠標(biāo)滾輪滾動(dòng)時(shí)圖片進(jìn)行切換。
支持鍵盤(pán)方向鍵實(shí)現(xiàn)圖片切換效果。
支持點(diǎn)擊圖片切換，支持點(diǎn)擊當(dāng)前圖片鏈接。
進(jìn)度條滑塊展示圖片圖片數(shù)量進(jìn)度。
XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="loading"><img src="images/loader.gif" alt="loading" /></div> 
 <div id="captions"></div> 
 <div 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" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 

div.demo是最外面的一層，包含了整個(gè)滾動(dòng)效果所需的所有元素。#imageflow是必需的，且與其內(nèi)部包含的元素的ID名稱不能修改，如確實(shí)要修改，就要先定義或直接修改JS代碼了。#loading用來(lái)裝載一個(gè)加載動(dòng)畫(huà)的圖片，當(dāng)然你也可以直接寫(xiě)成"loading"或其他文字。#captions用來(lái)顯示圖片的標(biāo)題。#images放置所要滾動(dòng)切換的圖片，數(shù)量不限。#scrollbar就是展示圖片的進(jìn)度條。#slider是一個(gè)滑塊，當(dāng)切換圖片時(shí)，滑塊會(huì)滑動(dòng)到相應(yīng)的位置，以展示圖片數(shù)量的位置。
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 } 
#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 } 

CSS是整個(gè)效果實(shí)現(xiàn)的關(guān)鍵部分，如果CSS控制不好，將得不到你要的效果。
.demo設(shè)置了寬度和高度，并設(shè)置position:relative和overflow:hidden，目的是為了讓鼠標(biāo)滑輪滾動(dòng)作用的范圍限制在.demo里。#images設(shè)置了margin值，并對(duì)內(nèi)部的img設(shè)置了相對(duì)定位。#captions設(shè)置了用來(lái)顯示圖片標(biāo)題的樣式，注意我使用半透明的圖片cap_bg.png作為背景圖片，在IE6下不支持透明的png圖片，所以你要進(jìn)行相關(guān)的處理。接下來(lái)看滾動(dòng)進(jìn)度條和滑塊的設(shè)置，都運(yùn)用的定位和深度設(shè)置，為何要這樣設(shè)置，只有大家去慢慢測(cè)試才會(huì)知道其中的奧妙。
引入jquery庫(kù)和滑動(dòng)js文件

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

所有的js動(dòng)作都在imageflow.js完成，我只做了略微的改動(dòng)，大家可以直接使用。
現(xiàn)在可以看到效果了吧。但是還有問(wèn)題：
圖片連接地址如何獲?。?/strong>
最終的效果應(yīng)該是點(diǎn)擊當(dāng)前展示的圖片時(shí)，會(huì)連接到一個(gè)頁(yè)面，用來(lái)展示該圖片相關(guān)的詳細(xì)信息。那么這個(gè)鏈接地址如何獲取，大概在第252行開(kāi)始有這樣兩行代碼：

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

<img src="images/s1.jpg" alt="image1" longdesc="#" />