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 相关文章推荐
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
使用Node.js配合Nginx实现高负载网络
Jun 28 Javascript
有关Promises异步问题详解
Nov 13 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
JavaScript的一些小技巧分享
Jan 06 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
Mysql的常用命令
2006/10/09 PHP
一个简单的自动发送邮件系统(一)
2006/10/09 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
javascript prototype 原型链
2009/03/12 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
浅谈Javascript中Object与Function对象
2015/09/26 Javascript
移动端横屏的JS代码(beta)
2016/05/16 Javascript
详解JS-- 浮点数运算处理
2016/11/28 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
在vue中使用G2图表的示例代码
2019/03/19 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
整理Python中的赋值运算符
2015/05/13 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python 使用requests模块发送GET和POST请求的实现代码
2016/09/21 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python队列Queue的详解
2019/05/10 Python
python里运用私有属性和方法总结
2019/07/08 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
采购主管的岗位职责
2013/12/17 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
网络管理员岗位职责
2014/03/17 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
就业意向协议书
2015/01/29 职场文书