基于jquery实现鼠标滚轮驱动的图片切换效果

jQuery可以制作出与Flash媲美的动画效果，这点绝对毋庸置疑，本文将通过实例演示一个基于鼠标滚轮驱动的图片切换效果。

本例实现的效果：
鼠标滚轮滚动时图片进行切换。
支持键盘方向键实现图片切换效果。
支持点击图片切换，支持点击当前图片链接。
进度条滑块展示图片图片数量进度。
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是必需的，且与其内部包含的元素的ID名称不能修改，如确实要修改，就要先定义或直接修改JS代码了。#loading用来装载一个加载动画的图片，当然你也可以直接写成”loading”或其他文字。#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 }
#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是整个效果实现的关键部分，如果CSS控制不好，将得不到你要的效果。
.demo设置了宽度和高度，并设置position:relative和overflow:hidden，目的是为了让鼠标滑轮滚动作用的范围限制在.demo里。