jQuery-轮播图封装
轮播代码封装到jquery对象方法,目前还不完善
DOM代码:
<div class="slider"> <div class="ul" data-options="a:1,b:2"> <ul> <li class="li1">123</li> <li class="li2">234<br>123</li> <li class="li3">345</li> </ul> <div></div> <div></div> </div> <div></div> </div>
jquery对象方法封装代码
var slider=window.slider={ sliderShow:function(jq,num){ var i=num||0; var options=new Function("return"+jq.data("options"))(); var count=options.count; jq.children('.a').eq(0).addClass('current'); slider.timer=setInterval(function(){ i++; var next=(i==3)?0:(i+1); var last=i-1; if(i==count){ i=0; next=i+1; } jq.children('.a').removeClass('current next last').eq(next).addClass('next').end().eq(last).addClass('last').end().eq(i).addClass('current'); },options.time); }, nextClick:function(jq,num){ clearInterval(this.timer); this.sliderShow(jq,jq); var options=new Function("return"+jq.data("options"))(); var cut=jq.children('.current').index(); var count=options.count; // 前进后退按钮还没封装 } }; slider.sliderShow($(".test")); $(".nextBtn").click(function(){ slider.nextClick($(".test")); }) $(".hae1").click(function(e){ console.log(e.target); }); $.data($("#test")[0],"foo",{a:1,b:2}); $.fn.slider=function(_a1,_a2){ if(typeof _a1=="string"){ $.fn.slider.methods[_a1](this,_a2) } _a1=_a1||{}; return this.each(function(index, el) { var _a3=$.data(this,"slider"); if(_a3){ $.extend(_a3.options,_a2); }else{ _a3=$.data(this,"slider",{ options:_a2 }) } }); }; $.fn.slider.methods={ options:function(jq){ return $.data(jq[0],"slider").options; } }

 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号