定时器重复累加。怎么设置鼠标移入画面停止和小圆点定时更新

html:
<body>

<div class="one">
    <div class="two clearfix">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
        <div class="img4"></div>
    </div>
    <ul class="list clearfix">
        <li class="list1" value="0"></li>
        <li class="list2" value="1"></li>
        <li class="list3" value="2"></li>
    </ul>
</div>
<button class="btn">btn</button>

</body>
js:
var bomb = $('.bomb').css('width');

var math = 0;
var val = 0;
function circle(){
    if(!$('.two').is(":animated")){
        if(math == 3){
        $('.two').css("left","0");
        $('.two').animate({left:"-=300px"},2000);
        math = 1;
        }else {
        math++;
        $('.two').animate({left:"-=300px"},2000);
        }
        }
};
var timer = setInterval(circle,3000);

$('.one').mouseenter(function(){
    clearInterval(timer);
});
$('.one').mouseleave(function(){
    clearInterval(timer);
    setInterval(circle,3000);
});
        })

请问为什么我的定时器会不断累加啊。就是移入移除会加快图片轮播的速度。还有就是我这个移入移除根本没有暂停和重新运行的效果,请问是哪里出了问题。新人求指点。还有就是轮播图的小圆点怎么实时更新

阅读 1.9k
2 个回答
$('.one').mouseleave(function(){
    clearInterval(timer);
    timer=setInterval(circle,3000);
});
$('.two').animate({left:"-=300px"},2000,function complete(){
    $(".list .list1"+ math).css({
        ....
    });
});
var timer = setInterval(circle,3000);

$('.one').mouseenter(function(){
    clearInterval(timer);
});
$('.one').mouseleave(function(){
    clearInterval(timer);
    setInterval(circle,3000);//你每次移出都在这里新建了定时器,这个定时器一直没取消,重新给timer赋值吧
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题