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

更新时间：2015年10月26日 17:05:29 投稿：lijiao

这篇文章主要介绍了基于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里。#images设置了margin值，并对内部的img设置了相对定位。#captions设置了用来显示图片标题的样式，注意我使用半透明的图片cap_bg.png作为背景图片，在IE6下不支持透明的png图片，所以你要进行相关的处理。接下来看滚动进度条和滑块的设置，都运用的定位和深度设置，为何要这样设置，只有大家去慢慢测试才会知道其中的奥妙。
引入jquery库和滑动js文件

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script>

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

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

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

<img src="images/s1.jpg" alt="image1" longdesc="#" />

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

您可能感兴趣的文章:

关于锚点跳转及jQuery下相关操作与插件
锚点嘛，业余点的解释就是可以让页面定位到某个位置的点。在高度较高的页面中经常见到
2012-10-10
jquery的父子兄弟节点查找示例代码
这篇文章主要介绍了jquery的父子兄弟节点的查找方法,需要的朋友可以参考下
2014-03-03
jQuery-serialize()输出序列化form表单值的方法
jQuery-serialize()输出序列化表单值在工作中很常见也很实用，于是本人搜集整理了一些，需要了解的朋友可以详细参考下
2012-12-12
jquery zTree异步加载简单实例讲解
这篇文章主要为大家详细介绍了jquery zTree异步加载简单实例，ztree采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀，感兴趣的小伙伴们可以参考一下
2016-02-02
jQuery插件实现图片轮播特效
浏览各大网站，很多都少不了轮播效果，如何控制这些图片在一个方向上连续的滚动？这篇文章就为为大家详细介绍了jQuery插件实现图片轮播特效的代码，感兴趣的小伙伴们可以参考一下
2016-06-06
JQuery实现电梯导航效果
这篇文章主要为大家详细介绍了JQuery实现电梯导航效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
jQueryUI的Dialog的简单封装
这几天在做一个交互的原型，第一次大量采用jQueryUI，确实非常方便好用，其中一些功能点用到了弹出确认提示框，看了jQueryUI Dialog的例子，效果还不错，就是用起来有点儿别扭
2010-06-06
jquery实现垂直无限轮播的方法分析
这篇文章主要介绍了jquery实现垂直无限轮播的方法,结合实例形式分析了jQuery无限轮播相关界面布局、样式与页面元素动态操作实现技巧,需要的朋友可以参考下
2019-07-07
jquery实现预览提交的表单代码分享
这篇文章主要介绍了jquery实现预览提交的表单代码,需要的朋友可以参考下
2014-05-05
animate 实现滑动切换效果【实例代码】
下面小编就为大家带来一篇animate 实现滑动切换效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05