老师，为何鼠标悬停在图片上没效果，还是会轮播图片？

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

</script>

js代码

var timer = null;

var index = 0;

var main = document.getElementById("main");

var pics =document.getElementById("banner").getElementsByTagName("div");

var len = pics.length;

function slideImg(){

timer = setInterval(function(){

index++;

if(index>=len) index=0;

changeImg();

},2000)

main.onmouseout();

main.onmouseover=function(){

if(timer)

clearInterval(timer);

}

function changeImg(){

for(var i=0;i<len;i++){

pics[i].style.display="none";

}

pics[index].style.display="block";

}

slideImg();

慕虎5419128 2020-05-10

源自：项目：JavaScript轮播图 4-5 子菜单结构和样式（2）

收起

1回答

好帮手慕小琪 2020-05-10 18:12:03

同学你好，由于js代码中的slideImg()方法当鼠标离开图片时没有触发函数，导致没有效果，修改后代码如下：

function slideImg(){
	main.onmouseover=function(){
		if(timer) clearInterval(timer);
	}
	
	main.onmouseout = function(){
		timer = setInterval(function(){
		index++;
		if(index>=len) index=0;
		changeImg();
		},2000);
	}
	
	main.onmouseout();
}

如果我的回答解决了你的疑惑，请采纳！祝学习愉快~

收起回答

提问者慕虎5419128 #1

老师再问下，那是为何没有触发函数呢，我在slime函数里也写了onmouseover的事件的呀

2020-05-10 20:05:31
好帮手慕阿莹回复提问者慕虎5419128 #2

同学你好，main.onmouseout();出了问题导致没有办法向下执行，原因是，这里没有给main.onmouseout();绑定函数，我们给onmouseout（）绑定这个main.onmouseout = function(){ timer = setInterval(function(){ index++; if(index>=len) index=0; changeImg(); },2000); } 后，main.onmouseout();不报错了就可以向下执行onmouseover等了。如果我的回答解决了你的疑惑，请采纳！祝学习愉快~

2020-05-11 11:58:43