老师，定时器执行这个到底是怎么回事呢？

function byId(id) {
    if (typeof(id) === 'string') {
        return document.getElementById(id);
    } else {
        return id;
    }
}
console.log(byId('main'));
var timer = null;
var index = 0;
var div = byId('banner').getElementsByTagName('div');
var len = div.length;
//给小圆点绑定事件；
var dot = byId('dot').getElementsByTagName('span');
 
function slideImg() {
    var main = byId('main');
    main.onmouseover = function() {
        //鼠标滑过图片，清除定时器
        if (timer) {
            clearInterval(timer);
        }
    }
    //没有滑过,哪里来的离开呀！所以必须滑过，才能离开！
     
    //自动触发onmouseout事件
    //这是一个函数表达式，声明不能提前；
    main.onmouseout = function() {
        timer = setInterval(function() {
            index++;
            if (index >= len) {
                index = 0;
            }
            changeImg();
 
        },3000);
        //经过3秒执行一次！
        //遍历所有的点击事件，绑定点击事件，点击圆点切换图片，
        //利用立即执行函数来解决闭包带来的索引永远是最后一位的问题；
         
    }
    main.onmouseout();
    //改变index为当前span索引；
    for (var j = 0; j < len; j++) {
        (function(i) {
            dot[i].onclick = function() {
            index=i;
            changeImg();
            this.className='active';
            }
     
        }(j))
     
    }
}
 
function changeImg() {
    //遍历banner下所有的div以及dot下所有的span标签，将div隐藏，将span上的类清空；
    for (var i = 0; i < len; i++) {
        div[i].style.display = "none";
        dot[i].className="";
         
    }
    div[index].style.display = "block";
    dot[index].className='active';
}
slideImg();
我使用debug调试的时候，发现一开始并不会执行定时函数setInterval里面的函数，定时器执行的时候是不是
一开始不会执行里面的东西，而是3秒之后再执行里面的东西？假如立刻执行里面的东西，那么进入for循环之后
index就是1，那么第一张图片永远就不会显示出来了..所以我理解的是第一张图片因为设置了类.slide-active，
所以会显示出来，等到3秒之后执行定时器里面的函数，调用changeimg函数，是不是这样子呢？

shine62 2019-03-27

源自：项目：JS实现轮播特效 3-7 点击圆点切换图片（2）

收起

1回答

厚德载物ddd 2019-03-28 11:40:04

你好同学,首先需要理解onmouseout和onmouseover这两个事件.
onmouseout：在鼠标指针移动到目标元素外时触发，可以简单的理解为只要鼠标指针不在目标元素上就触发.onmouseover：在鼠标指针移动到指定的对象上时触发.那么，观察代码：

main.onmouseover = function() {
        //鼠标滑过图片，清除定时器
        if (timer) {
            clearInterval(timer);
        }
    }
    main.onmouseout = function() {
        timer = setInterval(function() {
            index++;
            if (index >= len) {
                index = 0;
            }
            changeImg();
        },3000);
    }

这段代码表示的是，只要鼠标没有放在目标的元素上，就触发onmouseout事件，执行setInterval，实现轮播图自动轮播，当把鼠标放在目标元素上，就会触发onmouseover事件，执行 clearInterval(timer)，清除定时器，停止图片轮播.

祝学习愉快~

收起回答

提问者 shine62 #1

老师，这个我明白，我的疑问是为什么打开页面之后，图片不是在第二张显示，如果执行定时器里面的东西，index=1,那么调用changeimg函数时候，不是div[1].style.display="block"吗,也就是打开网页的时候应该是第二张图片会显示出来，第一张则不应该显示，可是打开网页的时候却是第一张图片先显示，经过3秒之后第二张图片显示出来，我的疑问是这个呀！

2019-03-28 20:24:23
厚德载物ddd 回复提问者 shine62 #2

同学你好, 你的理解是正确的,定时函数setInterval里面的函数是在鼠标移出后才会调用, 第一张图片因为设置了类slide-active，display为block,所以会显示出来，等到3秒之后执行定时器里面的函数，调用changeImg函数，设置图片的切换. 祝学习愉快~

2019-03-29 09:59:01