Jquery中文网 > jQuery > jquery 教程 > 正文 jquery实现滑动图片自己测试的例子

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

发布时间：2014-04-30 编辑：www.jquerycn.cn

最近使用jquery写了一个图片滑动的插件，虽然还是有些问题存在，用法很简单，希望对大家有所帮助

最近正在回顾之前的一些基础知识，用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); 
}); 
} 
}); 