快捷導(dǎo)航

jquery實(shí)現(xiàn)滑動圖片自己測試的例子

更新時間：2013年11月05日 17:18:24 作者：

最近使用jquery寫了一個圖片滑動的插件，雖然還是有些問題存在，用法很簡單，希望對大家有所幫助

最近正在回顧之前的一些基礎(chǔ)知識，用jquery寫了一個圖片滑動的插件，雖然還是有些問題存在，用法很簡單，只要在對目標(biāo)元素綁定slideW()函數(shù)即可，該函數(shù)最多支持兩個輸入，分別是圖片變化之后的寬度，以及動畫的速度，如果不輸入，則采用默認(rèn)的寬度以及默認(rèn)的速度。

下面是我自己測試的例子：

復(fù)制代碼代碼如下:

 
//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代碼

復(fù)制代碼代碼如下:

 
//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代碼

復(fù)制代碼代碼如下:

 
//js代碼 
//jquery實(shí)現(xiàn)圖片滑動效果 
var zyljq = $.noConflict(); 
zyljq.fn.extend({ 
slideW:function(wid,speed){ 
//wid要設(shè)置的寬度，可以設(shè)置變得最小時的寬度或者變得最大時的寬度 
//如果不設(shè)置，則會根據(jù)綁定元素的寬度，計(jì)算設(shè)置默認(rèn)寬度。 
//speed要設(shè)置的動畫運(yùn)行速度，可以是normal,slow,fast，也可以是毫秒數(shù)。 
//如果不設(shè)置，則默認(rèn)速度是normal 
that = this; //綁定該事件的所有元素 
var eleNum = zyljq(this).size(); //獲取圖片的數(shù)量 
var curwidth = zyljq(this).width();//獲取圖片的原始寬度 
if(!wid){ 
wid = Math.round(curwidth*4/5); 
//如果沒有設(shè)置動畫的終止條件，則計(jì)算出默認(rèn)的情況 
} 
if(zyljq.trim(speed) == ""){ 
//如果沒有設(shè)置速度，則取默認(rèn)速度 
speed = "normal"; 
} 
if(!isNaN(speed)){ 
//如果設(shè)置了負(fù)值，則變化 
speed = speed < 0?-speed:speed; 
} 
//計(jì)算照片的最大和最小寬度 
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); 
}); 
} 
}); 