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


Posted in Javascript onOctober 26, 2015

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

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

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

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都已经完成了所有的操作代码。

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

Javascript 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
node.js中的fs.fstatSync方法使用说明
Dec 15 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
Dec 22 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
Sep 19 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 #Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 #Javascript
php利用curl获取远程图片实现方法
Oct 26 #Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 #Javascript
You might like
桌面中心(三)修改数据库
2006/10/09 PHP
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
linux iconv方法的使用
2011/10/01 PHP
php统计文章排行示例
2014/03/04 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
javascript实现des解密加密全过程
2014/04/03 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Python生成随机MAC地址
2015/03/10 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
对python3新增的byte类型详解
2018/12/04 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python全局变量引用与修改过程解析
2020/01/07 Python
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
2013/01/06 HTML / CSS
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
企业投资意向书
2015/05/09 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang