老师，请问，轮播图，在刷新网页后，要移动一下鼠标，才能触发onmouseover。这是为什么？

鼠标是有一直放在图片上的

丶DamonChan 2018-02-13

源自：项目：JS实现轮播特效 6-2 作业题

收起

2回答

提问者丶DamonChan 2018-02-14 22:27:16

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>JavaScript轮播图</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
	</head>

	<body>
		<div class="banner" id="banner">
			<!--导航-->
			<div class="nav" id="nav">
				<div class="hover">首页</div>
				<div>点击看看</div>
				<div>会自动的</div>
				<div>我的网站</div>
			</div>
			<!--轮播图-->
			<div class="navImg" id="navImg">
				<div class="navImg-list1"></div>
				<div class="navImg-list2"></div>
				<div class="navImg-list3"></div>
				<div class="navImg-list4"></div>
			</div>
		</div>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>

* {
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";
	font-size: 22px;
}


/*轮播图整体*/

.banner {
	width: 1200px;
	height: 500px;
	margin: 0 auto;
	border: 1px solid rgba(188, 188, 188, 0.3);
}


/*导航*/

.nav {
	width: 1200px;
	height: 40px;
	line-height: 40px;
	background-color: #FFFFFF;
}

.nav div {
	width: 300px;
	height: 40px;
	float: left;
	text-align: center;
	border-radius: 4px;
	cursor: pointer;
}


/*轮播图*/

.navImg {
	width: 1200px;
	height: 460px;
	position: relative;
}

.navImg div {
	width: 1200px;
	height: 460px;
	float: left;
	cursor: pointer;
	overflow: hidden;
	position: absolute;
	display: none;
}

.navImg .navImg-list1 {
	background-image: url(../img/1.jpg);
	display: block;
}

.navImg .navImg-list2 {
	background-image: url(../img/3.jpg);
}

.navImg .navImg-list3 {
	background-image: url(../img/4.jpg);
}

.navImg .navImg-list4 {
	background-image: url(../img/5.jpg);
}


/*选中效果*/

.hover {
	background-color: #FFCC00;
	color: #666666;
	font-weight: bold;
}

window.onload = function() {
	var banner = document.getElementById('banner'),
		nav = document.getElementById('nav'),
		childNav = nav.getElementsByTagName('div'),
		navImg = document.getElementById("navImg"),
		childNavImg = navImg.getElementsByTagName('div'),
		index = 0,
		timer = null;

	//切换显示
	function setNavListHover() {
		for(var i = 0; i < childNav.length; i++) {
			childNav[i].className = "";
			childNavImg[i].style.display = "none";
		}
		childNav[index].className = "hover";
		childNavImg[index].style.display = "block";
	}
	//开始自动轮播
	function startAutoPlay() {
		timer = setInterval(function() {
			index++;
			if(index == childNav.length) {
				index = 0;
			}
			setNavListHover();
		}, 1000);
	}
	//结束自动轮播
	function stopAutoPlay() {
		clearInterval(timer);
	}

	function slideImg() {
		banner.onmouseout = function() {
			startAutoPlay()
		};
		banner.onmouseover = function() {
			stopAutoPlay()
		};
		banner.onmouseout();

		//点选导航切换轮播图
		for(var i = 0; i < childNav.length; i++) {
			childNav[i].id = i;
			childNav[i].onclick = function() {
				index = this.id;
				setNavListHover();
			};
		}
	}

	slideImg();
};

收起回答

正在想名字呢 #1

onmouseover是鼠标事件需要你有移入移出的操作才生效吧~

2018-02-16 14:26:04

好帮手慕糖 2018-02-13 16:38:05

你好，因为onmouseover是鼠标移出事件，需要鼠标移出设置的元素，才会生效，这里不知道你的结构是如何设置的，建议：详细的描述下问题的需求，然后把该部分的代码全部粘贴过来，便于大家测试与解决问题。

祝学习愉快~

收起回答

提问者丶DamonChan #1

整体代码我贴出来了。麻烦老师帮忙看一下

2018-02-14 22:30:15
提问者丶DamonChan #2

我现在的问题是，当我鼠标放在轮播图上的时候，是会触发onmouseover的。但是，在这个时候F5刷新一下页面后，鼠标如果保持不动，就不会触发到onmouseover。这是为什么

2018-02-14 22:33:03