老师，定时器执行这个到底是怎么回事呢？
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函数，是不是这样子呢？0
收起
正在回答 回答被采纳积分+1
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)，清除定时器，停止图片轮播.
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星