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

　　//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实现图片滑动效果

　　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);

　　});

　　}

　　});