写了一个点击无缝滚动的demo,但是点击的时候如果上一个不运动完成,在快速点击就会快闪。
可是开始也清除定时器了,后来发现是传入的jq对象,jqobj.timer=定时器,这里jqobj没法添加.timer,所以每次清空也是徒劳,根本就没有添加上这个对象的属性。
用document,getElementById(‘obj’)获取的原生dom对象,就是可以添加上.timer属性,所以清除定时器也是成功的。
重点是最后
// ****************** // document.getElementById('ul22')这里必须用原生dom对象,不能用jq对象 // ****************** rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont-1)*liwidth);
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} li{list-style: none;} .box{ 1200px;margin: 100px auto;} .gundong{ 660px;border: 1px solid ;padding: 10px 80px 0px;position: relative;} .span3{position: absolute;top: 50%;left: 0; 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;} .span4{position: absolute;top: 50%;right: 0; 80px;height: 40px;background: #ccc;line-height: 40px;text-align: center;margin-top: -20px;} .gunul_wrap{ 660px;overflow-x: hidden;position: relative;height: 125px;} .gunul{ 660px;margin: 0 auto;position: absolute;left: 0;top: 0;} .gunul:after{display: block;content: "";clear: both;} .gunul li{float: left;margin:0px 10px;} .gundong img{ 200px;} .gundong a{text-decoration: none;color: #333;} .gundong p{ 200px;line-height: 40px;text-align: center;} </style> <script type="text/javascript" src="js/jquery-1.10.2_d88366fd.js" ></script> </head> <body> <div class="box"> <!--无缝滚动--> <div class="gundong"> <span class="span3">next</span> <span class="span4">pre</span> <div class="gunul_wrap"> <ul class="gunul" id="ul22"> <li> <a href=""><img src="images/gjlb2.jpg" alt="" /><p>1</p></a> </li> <li> <a href=""><img src="images/gjlb3.jpg" alt="" /><p>2</p></a> </li> <li> <a href=""><img src="images/gjlb5.jpg" alt="" /><p>3</p></a> </li> </ul> </div> </div> </div> </body> </html> <script> $(function(){ rtjr.app.wufeng(); }); var rtjr={}; rtjr.tools={}; rtjr.ui={}; rtjr.app={}; // 无缝滚动 rtjr.tools.getul=function(obj){ var cont=obj.html(); cont+=cont; obj.html(cont); var objwidth=$(obj.find('li')[0]).outerWidth(true)*obj.find('li').length; obj.css({'width':objwidth}) }; rtjr.ui.move=function(obj,old,newd){ console.log(obj.timer); clearInterval(obj.timer); obj.timer=setInterval(function(){ var ispeed=(newd-old)/10; ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed); if(newd==old){ clearInterval(obj.timer); }else{ old+=ispeed; $(obj).css({'left':old}); } },30); }; rtjr.app.wufeng=function(){ var icont=0; rtjr.tools.getul($('.gunul')); var liwidth=$($('.gunul li')[0]).outerWidth(true); $('.span3').bind('click',function(){ if(icont==($('.gunul li').length)/2){ icont=0; $('.gunul').css('left',0); }; rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont+1)*liwidth); icont++; }); $('.span4').bind('click',function(){ if(icont==0){ icont=$('.gunul li').length/2; $('.gunul').css('left',-$('.gunul').outerWidth()/2); }; // ****************** // document.getElementById('ul22')这里必须用原生dom对象,不能用jq对象 // ****************** rtjr.ui.move(document.getElementById('ul22'),-icont*liwidth,-(icont-1)*liwidth); icont--; }); }; </script>