写了一个点击无缝滚动的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>