jquery实现滑动图片自己测试的例子


Posted in Javascript onNovember 05, 2013

最近正在回顾之前的一些基础知识,用jquery写了一个图片滑动的插件,虽然还是有些问题存在,用法很简单,只要在对目标元素绑定slideW()函数即可,该函数最多支持两个输入,分别是图片变化之后的宽度,以及动画的速度,如果不输入,则采用默认的宽度以及默认的速度。

下面是我自己测试的例子:

//html代码 
<div class = "content"> 
<ul class = "list"> 
<li class = "liimg"><span class = "imgli img1"></span></li> 
<li class = "liimg"><span class = "imgli img2"></span></li> 
<li class = "liimg"><span class = "imgli img3"></span></li> 
<li class = "liimg"><span class = "imgli img4"></span></li> 
</ul> 
</div>

css代码
//css代码 
*{margin:0px;padding:0px;list-style-type:none;} 
body{text-align:center;} 
.content{width:590px;margin:0 auto;text-align:left;} 
.list{width:565px;margin:0px 9px;border:1px solid #eee;padding:5px;display:inline-block;overflow:hidden;} 
.liimg{padding:4px;border:1px solid #aaa;border-radius:2px;display:inline-block;*display:inline;*margin:0px 3px;background:#FFF;width:auto;} 
.imgli{margin:2px 0px;width:125px;height:300px;display:inline-block;} 
.img1{background:url(images/img1.jpg) no-repeat 50% 50%;} 
.img2{background:url(images/img2.jpg) no-repeat 50% 50%;} 
.img3{background:url(images/img3.jpg) no-repeat 50% 50%;} 
.img4{background:url(images/img4.jpg) no-repeat 50% 50%;}

js代码
//js代码 
//jquery实现图片滑动效果 
var zyljq = $.noConflict(); 
zyljq.fn.extend({ 
slideW:function(wid,speed){ 
//wid要设置的宽度,可以设置变得最小时的宽度或者变得最大时的宽度 
//如果不设置,则会根据绑定元素的宽度,计算设置默认宽度。 
//speed要设置的动画运行速度,可以是normal,slow,fast,也可以是毫秒数。 
//如果不设置,则默认速度是normal 
that = this; //绑定该事件的所有元素 
var eleNum = zyljq(this).size(); //获取图片的数量 
var curwidth = zyljq(this).width();//获取图片的原始宽度 
if(!wid){ 
wid = Math.round(curwidth*4/5); 
//如果没有设置动画的终止条件,则计算出默认的情况 
} 
if(zyljq.trim(speed) == ""){ 
//如果没有设置速度,则取默认速度 
speed = "normal"; 
} 
if(!isNaN(speed)){ 
//如果设置了负值,则变化 
speed = speed < 0?-speed:speed; 
} 
//计算照片的最大和最小宽度 
if(wid > curwidth){ 
widMin = Math.floor((eleNum*curwidth - wid)/(eleNum-1))+"px"; 
widMax = ((curwidth*eleNum) - widMin*(eleNum-1))+"px"; 
}else{ 
widMax = Math.floor((eleNum*curwidth - wid*(eleNum-1)))+"px"; 
widMin = wid+"px"; 
} 
//console.log("widMax="+widMax+";widMin="+widMin); 
//绑定hover事件 
zyljq(this).hover(function(){ 
zyljq(that).stop(); 
zyljq(this).animate({width:widMax},speed); 
zyljq(that).not(this).animate({width:widMin},speed); 
},function(){ 
zyljq(that).stop(); 
zyljq(that).animate({width:curwidth},speed); 
}); 
} 
});

下面是视图:
原始效果:
jquery实现滑动图片自己测试的例子 
鼠标悬停在第二个元素上之后的效果:
jquery实现滑动图片自己测试的例子 
在这个过程中,也回顾了一些常见的问题,比如:ie低版本下,margin:0 auto;不居中的问题,display:inline-block;不支持的问题。也许还有很多的问题没有注意到,如果您发现了什么问题,欢迎您的指导。大家可以共同进步。
Javascript 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
深入理解逻辑表达式的用法 与或非的用法
Jun 06 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
Bootstrap常用组件学习(整理)
Mar 24 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
用js实现in_array的方法
Nov 05 #Javascript
jquery遍历数组与筛选数组的方法
Nov 05 #Javascript
javascript alert乱码的解决方法
Nov 05 #Javascript
jquery三个关闭弹出层的小示例
Nov 05 #Javascript
jquery ajax post提交数据乱码
Nov 05 #Javascript
jquery ajax属性async(同步异步)示例
Nov 05 #Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 #Javascript
You might like
服务器web工具 php环境下
2010/12/29 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python用来获得图片exif信息的库实例分析
2015/03/16 Python
一些常用的Python爬虫技巧汇总
2016/09/28 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python实现的字典值比较功能示例
2018/01/08 Python
Gauss-Seidel迭代算法的Python实现详解
2019/06/29 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python实现最短路径的实例方法
2020/07/19 Python
如何整合JQuery和Prototype
2014/01/31 面试题
化学相关工作求职信
2013/10/02 职场文书
30年同学聚会感言
2014/01/30 职场文书
小学毕业感言150字
2014/02/05 职场文书
《周恩来的四个昼夜》观后思想汇报范文两篇
2014/09/10 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
电气工程师岗位职责
2015/02/12 职场文书
大学生实习证明
2015/06/16 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书