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); }); } });
下面是视图:
原始效果:
鼠标悬停在第二个元素上之后的效果:
在这个过程中,也回顾了一些常见的问题,比如:ie低版本下,margin:0 auto;不居中的问题,display:inline-block;不支持的问题。也许还有很多的问题没有注意到,如果您发现了什么问题,欢迎您的指导。大家可以共同进步。
jquery实现滑动图片自己测试的例子
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@