//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代碼
*{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代碼
//jquery實(shí)現(xiàn)圖片滑動(dòng)效果
var zyljq = $.noConflict();
zyljq.fn.extend({
slideW:function(wid,speed){
//wid要設(shè)置的寬度，可以設(shè)置變得最小時(shí)的寬度或者變得最大時(shí)的寬度
//如果不設(shè)置，則會(huì)根據(jù)綁定元素的寬度，計(jì)算設(shè)置默認(rèn)寬度。
//speed要設(shè)置的動(dòng)畫運(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);
//如果沒(méi)有設(shè)置動(dòng)畫的終止條件，則計(jì)算出默認(rèn)的情況
}
if(zyljq.trim(speed) == ""){
//如果沒(méi)有設(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);
});
}
});