效果體驗網址：http:///keleyi/phtml/image/12.htm
HTML文件代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="圖片切換,滾輪,jquery" />
<meta name="description" content="keleyi，演示HTML、CSS、jquery、ASP.NET案例和示例" />
<title>js鼠標滾輪滾動圖片切換效果-</title><base target="_blank" />
<style type="text/css">
img{border:none; }
.clear{clear:both}
.demo{width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden}
#images-keleyi-com{ margin:20px 0 0 60px; width:860px}
#images-keleyi-com img{position:absolute; margin-top:-160px;}
#loading-keleyi-com{margin:0; color:#fff; text-align:center}
#loading-keleyi-com img{position:ralative; margin:0}
#captions-keleyi-com{position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(http:///keleyi/phtml/image/12/images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000}
#scrollbar-keleyi-com{position:relative; top:-100px; height:2px; background:#abcd3a url(http:///keleyi/phtml/image/12/images/scroll.gif) repeat-x; z-index:10001}
#slider-keleyi-com{position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(http:///keleyi/phtml/image/12/images/bar.gif) no-repeat; z-index:10002}
a{color:Blue}
</style>
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http:///keleyi/phtml/image/12/keleyi.imageflow.js"></script>
</head>
<body>
<div id="header">
<div id="logo"><h1><a href="http://" title="返回keleyi首頁"></a></h1></div>
</div>
<div id="main">
<h2 class="top_title"><a href="http:///view-blog-81.html">基於鼠標滾輪驅動的圖片切換效果</a></h2>
<div class="demo">
<div id="imageflow-keleyi-com">
<div id="loading-keleyi-com"><img src="images/loader.gif" alt="加載中" /></div>
<div id="captions-keleyi-com"></div>
<div id="images-keleyi-com">
<img src="http://down./images/bing/2013-8-7_Honeybee_CobisRM_935C647_008_ZH-CN1223668775.jpg" alt="多彩圖標按鈕動畫下拉菜單" longdesc="http:///a/bjac/cu727al8.htm" />
<img src="http://down./images/bing/2013-8-23_Fairytopia_ZH-CN6940724395_keleyi.jpg" alt="Fairytopia" longdesc="http://down./images/bing/2013-8-23_Fairytopia_ZH-CN6940724395_keleyi.jpg" />
<img src="http://down./images/bing/2013-8-10_Toulouse_ZH-CN7808794431_keleyi.jpg" alt="Toulouse" longdesc="http://down./images/bing/2013-8-10_Toulouse_ZH-CN7808794431_keleyi.jpg" />
<img src="http://down./images/bing/2013-8-18_SpiritBear_ZH-CN8342221823_keleyi.jpg" alt="SpiritBear" longdesc="http://down./images/bing/2013-8-18_SpiritBear_ZH-CN8342221823_keleyi.jpg" />
<img src="http://down./images/bing/2013-8-22_KataleKhorCave_ZH-CN6707191757_keleyi.jpg" alt="彈出燈箱窗口浏覽圖片" longdesc="http:///a/bjac/ppdss7ux.htm" />
<img src="http://down./images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_keleyi.jpg" alt="BoliviaSalt" longdesc="http://down./images/bing/2013-9-27_BoliviaSalt_ZH-CN10259156901_keleyi.jpg" />
<img src="http://down./images/bing/2013-9-3_DwarfGoby_ZH-CN11409083216_keleyi.jpg" alt="DwarfGoby" longdesc="http://down./images/bing/2013-9-3_DwarfGoby_ZH-CN11409083216_keleyi.jpg" />
</div>
<div id="scrollbar-keleyi-com">
<div id="slider-keleyi-com"></div>
</div>
</div>
</div>
<br/>
把光標停在圖片上，轉動鼠標滾輪就可以切換圖片，也可以拖動下方水平的滾動條，也可以點擊非頂端的圖片切換到對應圖。
</div>
<div id="footer">
<p>Powered by 出處：<a href="http://"></a> <a href="http:///a/bjac/kvqcktk6.htm">原文</a></p>
</div>
<p id="stat"></p>
</body>
</html>