基于jquery實現(xiàn)鼠標滾輪驅(qū)動的圖片切換效果
jQuery可以制作出與Flash媲美的動畫效果，這點絕對毋庸置疑，本文將通過實例演示一個基于鼠標滾輪驅(qū)動的圖片切換效果。
本例實現(xiàn)的效果：
鼠標滾輪滾動時圖片進行切換。
支持鍵盤方向鍵實現(xiàn)圖片切換效果。
支持點擊圖片切換，支持點擊當前圖片鏈接。
進度條滑塊展示圖片圖片數(shù)量進度。
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是最外面的一層，包含了整個滾動效果所需的所有元素。#imageflow是必需的，且與其內(nèi)部包含的元素的ID名稱不能修改，如確實要修改，就要先定義或直接修改JS代碼了。#loading用來裝載一個加載動畫的圖片，當然你也可以直接寫成"loading"或其他文字。#captions用來顯示圖片的標題。#images放置所要滾動切換的圖片，數(shù)量不限。#scrollbar就是展示圖片的進度條。#slider是一個滑塊，當切換圖片時，滑塊會滑動到相應(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是整個效果實現(xiàn)的關(guān)鍵部分，如果CSS控制不好，將得不到你要的效果。
.demo設(shè)置了寬度和高度，并設(shè)置position:relative和overflow:hidden，目的是為了讓鼠標滑輪滾動作用的范圍限制在.demo里。#images設(shè)置了margin值，并對內(nèi)部的img設(shè)置了相對定位。#captions設(shè)置了用來顯示圖片標題的樣式，注意我使用半透明的圖片cap_bg.png作為背景圖片，在IE6下不支持透明的png圖片，所以你要進行相關(guān)的處理。接下來看滾動進度條和滑塊的設(shè)置，都運用的定位和深度設(shè)置，為何要這樣設(shè)置，只有大家去慢慢測試才會知道其中的奧妙。
引入jquery庫和滑動js文件
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/imageflow.js"></script>
所有的js動作都在imageflow.js完成，我只做了略微的改動，大家可以直接使用。
現(xiàn)在可以看到效果了吧。但是還有問題：
圖片連接地址如何獲??？
最終的效果應(yīng)該是點擊當前展示的圖片時，會連接到一個頁面，用來展示該圖片相關(guān)的詳細信息。那么這個鏈接地址如何獲取，大概在第252行開始有這樣兩行代碼：
image.url = image.getAttribute("longdesc");
image.ondblclick = function() { document.location = this.url; }
可以看出，圖片的鏈接地址來源于它的屬性：longdesc，當單擊圖片的時候，頁面將會跳轉(zhuǎn)到相應(yīng)的地址頁面。好現(xiàn)在我們回到剛開始的XHTML代碼，只需給每張圖片指定longdesc屬性，并將值設(shè)為對應(yīng)的網(wǎng)頁地址。如：
<img src="images/s1.jpg" alt="image1" longdesc="#" />
現(xiàn)在，任務(wù)算是完成了?？赐瓯纠銜l(fā)現(xiàn)，你根本不需要些一句jquery代碼，因為imageflow都已經(jīng)完成了所有的操作代碼。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
- JQuery實現(xiàn)鼠標滾輪滑動到頁面節(jié)點
- 基于jquery的當鼠標滾輪到最底端繼續(xù)加載新數(shù)據(jù)思路分享(多用于微博、空間、論壇 )
- jQuery實現(xiàn)鼠標滾輪動態(tài)改變樣式或效果
- jquery橫向縱向鼠標滾輪全屏切換
- jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- jquery 圖片預(yù)加載 自動等比例縮放插件
- 用jquery實現(xiàn)等比例縮放圖片效果插件
- jquery實現(xiàn)圖片按比例縮放示例
- JQuery 圖片延遲加載并等比縮放插件
- jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼
- 基于jquery實現(xiàn)圖片相關(guān)操作（重繪、獲取尺寸、調(diào)整大小、縮放）
- jQuery實現(xiàn)的鼠標滾輪控制圖片縮放功能實例
相關(guān)文章
這篇文章主要介紹了通過jquery實現(xiàn)圖片按比例縮放,需要的朋友可以參考下2014-07-07
jQuery 實現(xiàn)DOM元素拖拽交換位置的實例代碼
這篇文章主要介紹了jQuery 實現(xiàn)DOM元素拖拽交換位置，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
jquery中封裝了一些ajax請求的方法，很實用，整理出來與大家分享下，感興趣的朋友可以參考下哈，希望可以幫助到你2013-03-03
簡潔實用的BootStrap jQuery手風(fēng)琴插件
這篇文章主要介紹了簡潔實用的BootStrap jQuery手風(fēng)琴插件知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-08-08
jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)表格隔行及滑動,點擊時變色的方法,可實現(xiàn)表格隔行變色以及鼠標滑過與點擊時變色的功能,涉及jQuery響應(yīng)鼠標事件及頁面元素樣式動態(tài)改變的相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了jQuery中復(fù)合選擇器簡單用法,結(jié)合實例形式分析了jQuery中復(fù)合選擇器的概念、功能、應(yīng)用場景及相關(guān)使用方法,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了文本域中換行符的替換,需要的朋友可以參考下2014-03-03
本文給大家總結(jié)了幾種使用jQuery實現(xiàn)的分頁插件，效果非常不錯，有需要的小伙伴可以參考下。2015-11-11
jquery ajax的執(zhí)行順序大家在項目經(jīng)常會顛倒，下面通過本文給大家介紹jquery ajax的執(zhí)行順序，涉及到j(luò)query ajax執(zhí)行順序相關(guān)知識，對jquery ajax執(zhí)行順序相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
jQuery formValidator表單驗證插件開源了 含API幫助、源碼、示例
ajaxValidator函數(shù)在提交后發(fā)生錯誤，停留在本頁面后,再次觸發(fā)校驗會讓提示內(nèi)容一直處于onload狀態(tài)。2008-08-08