jQuery轮播图函数封装
函数调用的时候,传递四个必要的参数就行了。
参数1:要运动的ul;
参数2:左边按钮;
参数3:右边按钮;
参数4:运动速度;(可选,默认3s)
代码如下:
html部分:
<div class="div1"> <ul class="ul1"> <li>1111111111</li> <li>2222222222</li> <li>3333333333</li> <li>4444444444</li> <li>5555555555</li> </ul> </div> <div> <input id="btn1" type="button" value="←"> <input id="btn2" type="button" value="→"> </div>
css部分:
* { margin:0; padding:0;} body { text-align:center;} .div1 { overflow:hidden; width:350px; height:160px; margin:0 auto; border:3px solid #f00; position:relative;} .ul1 { position:absolute; left:0; top:0;} .ul1 li { width:100px; height:150px; float:left; list-style:none;}
js部分:
var imgScroll = { //变量 oUl : null, oLiWidth : 0, oLiLength : 0, btnLeft : null, btnRight : null, iIndex : 0, timer : null, speed : 0, //函数 move : function(){ //复制ul里面的li this.oUl.children(‘li‘).clone().appendTo(this.oUl); this.oLiWidth = this.oUl.children(‘li‘).width(); this.oLiLength = this.oUl.children(‘li‘).length; //设置ul宽度 this.oUl.width(this.oLiWidth*this.oLiLength); var self = this; //左边按钮 this.btnLeft.bind(‘click‘,function(){ clearInterval(self.timer); if(self.iIndex==self.oLiLength/2){ self.iIndex = 0; self.oUl.stop(true,true).css(‘left‘,‘0‘); }; self.iIndex++; self.oUl.stop(true,true).animate({left:-self.iIndex*self.oLiWidth},self.autoMove()); }); //右边按钮 this.btnRight.bind(‘click‘,function(){ clearInterval(self.timer); if(self.iIndex==0){ self.iIndex = self.oLiLength/2; self.oUl.stop(true,true).css(‘left‘,-self.iIndex*self.oLiWidth); }; self.iIndex--; self.oUl.stop(true,true).animate({left:-self.iIndex*self.oLiWidth},self.autoMove()); }); }, //自动轮播 autoMove : function(){ var self = this; this.timer = setInterval(function(){ if(self.iIndex==self.oLiLength/2){ self.iIndex = 0; self.oUl.stop(true,true).css(‘left‘,‘0‘); }; self.iIndex++; self.oUl.animate({left:-self.iIndex*self.oLiWidth}); },self.speed); }, //初始化(运动的ul,左边按钮,右边按钮) init : function(oUl, btnLeft, btnRight, speed){ this.oUl = oUl; this.btnLeft = btnLeft; this.btnRight = btnRight; this.speed = speed ? speed*1000 : 3000; this.move(); this.autoMove(); } }; //调用 imgScroll.init($(‘.ul1‘),$(‘#btn1‘),$(‘#btn2‘),2);
有不对或者可以优化的地方,请大家指正,谢谢!
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。