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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
input按钮的事件处理大全
Dec 10 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
Jan 19 Javascript
基于JS对象创建常用方式及原理分析
Jun 28 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
基于canvas实现手写签名(vue)
May 21 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 4.2书写安全的脚本
2006/10/09 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
javascript实现信息增删改查的方法
2015/07/25 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python 3.8 新功能全解
2019/07/25 Python
深入了解python中元类的相关知识
2019/08/29 Python
如何将你的应用迁移到Python3的三个步骤
2019/12/22 Python
python3 re返回形式总结
2020/11/20 Python
机电一体化专业应届本科生求职信
2013/09/27 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
大一新生学期自我评价
2014/04/09 职场文书
小学生评语大全
2014/04/18 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
启动仪式策划方案
2014/06/14 职场文书
市场营销毕业求职信
2014/08/07 职场文书
公司奖励通知
2015/04/21 职场文书
教师节班会主持词
2015/07/06 职场文书
小学英语教学反思范文
2016/02/15 职场文书
如何书写邀请函?
2019/06/24 职场文书
python Polars库的使用简介
2021/04/21 Python
python之django路由和视图案例教程
2021/07/26 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android