开发者社区> 问答> 正文

用jQuery写的图片轮播为何停止定时器只能停止一次?

用jQuery写的图片轮播为何只有初次鼠标进入才能停止定时器?给我的感觉是后面无法停止自动播放,而且播放速度加快,调试很久不知问题出现在哪。
附上demo网址参考:http://huzerui.com/slideBox
js主要代码如下:

$(function () {
    var stage=$('.pic-stage');
    var pic=$('.pic-box');
    var panel=$('.panel');
    var panelLi=$('.panel li');
    //获取单张图片的大小
    var picWidth=parseInt($('.pic-box li:eq(0)').css('width'));
    //获取图片的个数
    var size=panelLi.size();
    /*根据导航条li的个数实现居中布局
    *采用width()方法获取的宽度不包括margin
    */
    var panelWidth=panel.width();
    //获取的margin包含上下边距和左右边距,用split()方法取得margin左右的数值
    var margin=parseInt(panelLi.css('margin').split(' ')[1]);
    var iNow=0;
    pic.css('width',picWidth*size);
    panel.css('margin-left',-(panelWidth+margin*size)/2);
    for(var i=0;i<size;i++){
        panelLi.eq(i).attr('index',i);
    }

    //导航条事件
        panelLi.hover(function() {
        iNow=$(this).attr('index');
        pic.stop().animate({left:(-iNow*picWidth)+'px'});    
    });

    //自动播放
    function autoPlay(){
        iNow++;
        if (iNow===size) {
            iNow=0;
        }    
        pic.stop().animate({left:(-iNow*picWidth)+'px'});
    }
    var timer=setInterval(autoPlay,1000);

    //鼠标悬浮停止定时器
    stage.hover(function() {
        clearInterval(timer);
    }, function() {
        setInterval(autoPlay,1000);
    });

展开
收起
小旋风柴进 2016-05-31 10:52:05 2591 0
1 条回答
写回答
取消 提交回答
  • //鼠标悬浮停止定时器
        stage.hover(function() {
            clearInterval(timer);
        }, function() {
            setInterval(autoPlay,1000);    //这里你的第二次hover事件就找不到上次的timer了, 因此你这里要定义一个timer = setInterval();
    2019-07-17 19:21:31
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载