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 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
各种页面定时跳转(倒计时跳转)代码总结
Oct 24 Javascript
javascript设计模式之解释器模式详解
Jun 05 Javascript
js与jQuery实现checkbox复选框全选/全不选的方法
Jan 05 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
三步搞定:Vue.js调用Android原生操作
Sep 07 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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
PHP脚本的10个技巧(7)
2006/10/09 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
实例讲解通过​PHP创建数据库
2019/01/20 PHP
laravel 错误处理,接口错误返回json代码
2019/10/25 PHP
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
python数组过滤实现方法
2015/07/27 Python
python删除服务器文件代码示例
2018/02/09 Python
Django处理文件上传File Uploads的实例
2018/05/28 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python框架flask表单实现详解
2019/11/04 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
顶撞领导检讨书
2014/01/29 职场文书
推荐信格式范文
2014/05/09 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
会计系毕业求职信
2014/08/07 职场文书
公司踏青活动方案
2014/08/16 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技