基于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 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
再谈javascript面向对象编程
Mar 18 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js opener的使用详解
Jan 11 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 Javascript
javascript数据类型详解
Feb 07 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 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导入大量数据到mysql性能优化技巧
2014/12/29 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
JS通过识别id、value值对checkbox设置选中状态
2020/02/19 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
Python函数式编程指南(四):生成器详解
2015/06/24 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
用Python识别人脸,人种等各种信息
2019/07/15 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
HTML5 3D旋转相册的实现示例
2019/12/03 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
文秘应届生求职信
2014/07/05 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
毕业实习感受与体会
2015/05/26 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书