有些情况会一闪一闪的出现切换问题, 该怎么解决?

很多网站案例在鼠标放上去的时候不会停止切换, 也就是不用加以下代码

main.onmouseover = function() {

// 清除定时器

if (timer) {

clearInterval(timer);

}

那么在不移除定时器的情况下, 在鼠标放上去以后, 图片切换回闪, 而且慢慢的就乱了, 有bug, 请问老师应该怎么解决呢

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

收起

2回答

好帮手慕夭夭 2019-02-12 10:03:14

你好同学 ,打印结果前面的18是这个代码执行的次数 .

另外 , 老师使用源码测试 ,去掉清除定时器 ,当鼠标第一次移入的时候 ,并没有出现一闪一闪的情况 .建议同学在重新测试一下 , 如果还是不行 , 可以把自己测试的代码粘贴上来 , 以便老师准确高效的帮助你查看问题 .

把banner-silde宽度改为800px之后会触发父元素main的onmouseout事件 ,是因为这个事件是冒泡的 . 有关冒泡属于高级课程里面讲解的内容 , 目前暂时可以理解为当鼠标从子元素离开后 , 会冒泡到父元素上 ,然后发现父元素绑定了离开事件 , 这个事件就会被触发 .

所以当你把banner-slide的宽度改小 ,鼠标离开banner-slide , 就会冒泡触发父元素的事件 . onmouseleave事件是不会冒泡的 , 你可以把onmouseout改为onmouseleave再测试 ,就不会触发父元素事件了.

希望能够解答你的疑惑 , 祝学习愉快 ,望采纳 .

提问者胖博 #1

我在main.onmouseout 的 function(){}里随便打印一个"111", console.log("111"); 定时器设置的是3秒, 鼠标第一次放到banner-slide的图片上后, 发现每隔3秒也就是图片切换的时候, 就会打印111, 这是为什么呢? 也是老师说的冒泡的原因吗? 每隔3秒因为切换了当前显示的图片, 所以鼠标相当于移到另一个子元素上了, 也就是从之前的子元素离开了, 冒泡到了父元素上, 触发了事件, 是这个原理吗? 另外改成onmouseleave后缺少没有bug了

2019-02-12 10:18:50
好帮手慕夭夭回复提问者胖博 #2

同学还是很聪明的 , 理解的没错 . 改成onmouseleave没有这个bug是因为onmouseleave不是冒泡的 .

2019-02-12 11:59:38

提问者胖博 2019-02-11 23:23:14

好像是因为使用了onmouseout()的原因, 定时器在这个事件里开启, 错乱了

不知道我红圈里标出来的打印的111前面的18是啥意思, 为什么鼠标滑过的时候如果不清除定时器就会错乱, 鼠标还在main这个div上, 还没有完全离开, 为什么会影响到onmouseout()导致定时器错乱?

提问者胖博 #1

而且改变了一下main这个div上面的class为banner-slide的div的尺寸为800px, 鼠标从main移到banner-slide的时候也会出发onmouseout事件, 为什么呢, banner-slide不是本来就在main之上吗, 为什么鼠标放到banner-slide上, 随着定时器切换图片, 会影响到onmouseout这个事件, 从而导致频繁开启新的定时器

2019-02-11 23:32:19