jQuery实现图片走马灯效果的原理分析
本文实例分析了jQuery实现图片走马灯效果的原理。分享给大家供大家参考,具体如下:
这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑。待会讲解
先上代码:
HTML:
<divclass="box"> <divstyle="width:1000px;"id="boxdiv"> <ul> <listyle="display:block;"title="清灵少女宛如梦境仙女"><ahref="#"> <imgsrc="images/110927/11-11092G32227.jpg"/></a></li> <lititle="美女海边性感透视装诱惑"><ahref="#"> <imgsrc="images/130621/1-130621145931-50.jpg"/></a></li> <lititle="夏小薇:百变小魔女变身性感数码宝贝"><ahref="#"> <imgsrc="images/130620/19-130620115013.jpg"/></a></li> <lititle="夏小薇化身《杀破狼》粉色妖姬鲜嫩欲滴"><ahref="#"> <imgsrc="images/130315/5-130315135240.jpg"/></a></li> </ul> </div> </div>
在<divclass="box">中,再包含了一个div,且设置了一个很比较大的宽度,是为了解决一个在垂直走马灯下没有的坑。该坑的效果是在li标签float为left的情况,不要里面的DIV,会出现图片轮播后,显示中的最后一张图片由下向上的跳动效果,这是float的本身特性造成的,因为父元素宽度不够的情况下,后面的元素会自动往下左沉下去,一旦上面宽度够了,就会自动飘上来,这个飘就会造成显示中的最后一张图片的跳动效果,所以采用内部嵌套一个DIV并设置<divclass="box">的overflowCSS样式来解决该问题。
CSS:
.box { width:800px; height:200px; margin-top:100px; margin-left:100px; overflow:hidden; } .boximg { border-style:none; height:200px; } .boxul { margin:0px; padding:0px; list-style-type:none; } .boxulli { float:left; }
脚本:
<scripttype="text/javascript"> $(document).ready(function(){ newZouMa().Start(); }); functionZouMa(){ this.maxLength=3;//最低显示数 this.Timer=2000;//计时器间隔时间 this.Ul=$(".boxul"); varhandId;//计时器id varself=this; this.Start=function(){ if(self.Ul.children().length<this.maxLength){ self.Ul.append(self.Ul.children().clone()); } handId=setInterval(self.Play,self.Timer); } this.Play=function(){ varimg=self.Ul.children().eq(0); varleft=img.children().eq(0).width(); img.animate({"marginLeft":(-1*left)+"px"},600,function(){ //appendTo函数是实现走马灯一直不间断播放的秘诀。 //目前网上看到的很多走马灯,走到最后一张的时候,会立马闪回第一张,而不是继续从后往前推进,即是没有明白该函数的作用的原因 $(this).css("margin-left","auto").appendTo(self.Ul); }); } } </script>
此处照例使用了jquery的动画效果函数animate来实现走马灯效果,并配合appendTo函数来实现无尽播放的效果。
有关appendTo函数的作用请参阅jquery的API文档,animate也请参阅API文档
更多关于jQuery特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》与《jQuery常见经典特效汇总》
希望本文所述对大家jQuery程序设计有所帮助。