jQuery可(kě)以制(zhì)作(zuò)出與Flash媲美的動畫(huà)效果，這點絕對毋庸置疑，本文将通(tōng)過實例演示一個(gè)基于鼠标滾輪驅動的圖片切換效果。其中JS源碼來(lái)自網絡，我隻做(zuò)了略微的改動，現将實例與大(dà)家(jiā)分享。

本例實現的效果：

• 鼠标滾輪滾動時(shí)圖片進行(xíng)切換。
• 支持鍵盤方向鍵實現圖片切換效果。
• 支持點擊圖片切換，支持點擊當前圖片鏈接。
• 進度條滑塊展示圖片圖片數(shù)量進度。

XHTML

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

.demo設置了寬度和(hé)高(gāo)度，并設置position:relative和(hé)overflow:hidden，目的是為(wèi)了讓鼠标滑輪滾動作(zuò)用的範圍限制(zhì)在.demo裏。#images設置了margin值，并對內(nèi)部的img設置了相對定位。#captions設置了用來(lái)顯示圖片标題的樣式，注意我使用半透明(míng)的圖片cap_bg.png作(zuò)為(wèi)背景圖片，在IE6下不支持透明(míng)的png圖片，所以你(nǐ)要進行(xíng)相關的處理(lǐ)。接下來(lái)看滾動進度條和(hé)滑塊的設置，都運用的定位和(hé)深度設置，為(wèi)何要這樣設置，隻有(yǒu)大(dà)家(jiā)去慢慢測試才會(huì)知道(dào)其中的奧妙。

引入jquery庫和(hé)滑動js文件

所有(yǒu)的js動作(zuò)都在imageflow.js完成，我隻做(zuò)了略微的改動，大(dà)家(jiā)可(kě)以直接下載并使用。

現在可(kě)以看到效果了吧(ba)。但(dàn)是還(hái)有(yǒu)問題：

圖片連接地址如何獲取？

最終的效果應該是點擊當前展示的圖片時(shí)，會(huì)連接到一個(gè)頁面，用來(lái)展示該圖片相關的詳細信息。那(nà)麽這個(gè)鏈接地址如何獲取。查看imageflow.js源碼，大(dà)概在第252行(xíng)開(kāi)始有(yǒu)這樣兩行(xíng)代碼：

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

可(kě)以看出，圖片的鏈接地址來(lái)源于它的屬性：longdesc，當單擊圖片的時(shí)候，頁面将會(huì)跳(tiào)轉到相應的地址頁面。好現在我們回到剛開(kāi)始的XHTML代碼，隻需給每張圖片指定longdesc屬性，并将值設為(wèi)對應的網頁地址。如：

現在，任務算(suàn)是完成了。看完本例你(nǐ)會(huì)發現，你(nǐ)根本不需要些(xiē)一句jquery代碼，因為(wèi)imageflow都已經完成了所有(yǒu)的操作(zuò)代碼。

該效果最适合應用在産品展示的網站(zhàn)中。