基于jquery实现鼠标滚轮驱动的图片切换效果(jquery操作html代码)

编辑：rootadmin

推荐整理分享基于jquery实现鼠标滚轮驱动的图片切换效果(jquery操作html代码)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery操作css,jquery的鼠标移入事件,jquery设置鼠标样式,jquery设置鼠标样式,jquery的鼠标移入事件,jquery代码实现鼠标点击,常用的jquery鼠标事件,常用的jquery鼠标事件,内容如对您有帮助，希望把文章链接给更多的朋友！

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

本例实现的效果：鼠标滚轮滚动时图片进行切换。支持键盘方向键实现图片切换效果。支持点击图片切换，支持点击当前图片链接。进度条滑块展示图片图片数量进度。XHTML

div.demo是最外面的一层，包含了整个滚动效果所需的所有元素。#imageflow是必需的，且与其内部包含的元素的ID名称不能修改，如确实要修改，就要先定义或直接修改JS代码了。#loading用来装载一个加载动画的图片，当然你也可以直接写成"loading"或其他文字。#captions用来显示图片的标题。#images放置所要滚动切换的图片，数量不限。#scrollbar就是展示图片的进度条。#slider是一个滑块，当切换图片时，滑块会滑动到相应的位置，以展示图片数量的位置。CSS

CSS是整个效果实现的关键部分，如果CSS控制不好，将得不到你要的效果。.demo设置了宽度和高度，并设置position:relative和overflow:hidden，目的是为了让鼠标滑轮滚动作用的范围限制在.demo里。#images设置了margin值，并对内部的img设置了相对定位。#captions设置了用来显示图片标题的样式，注意我使用半透明的图片cap_bg.png作为背景图片，在IE6下不支持透明的png图片，所以你要进行相关的处理。接下来看滚动进度条和滑块的设置，都运用的定位和深度设置，为何要这样设置，只有大家去慢慢测试才会知道其中的奥妙。引入jquery库和滑动js文件

所有的js动作都在imageflow.js完成，我只做了略微的改动，大家可以直接使用。现在可以看到效果了吧。但是还有问题：图片连接地址如何获取？最终的效果应该是点击当前展示的图片时，会连接到一个页面，用来展示该图片相关的详细信息。那么这个链接地址如何获取，大概在第行开始有这样两行代码：

可以看出，图片的链接地址来源于它的属性：longdesc，当单击图片的时候，页面将会跳转到相应的地址页面。好现在我们回到刚开始的XHTML代码，只需给每张图片指定longdesc属性，并将值设为对应的网页地址。如：

现在，任务算是完成了。看完本例你会发现，你根本不需要些一句jquery代码，因为imageflow都已经完成了所有的操作代码。