老师，我发现我的代码有个bug
如果在用浏览器打开运行代码的时候，如果鼠标不在main区域，效果是可以正常实现的；但是如果鼠标正好在main区域，定时器却没哟被清除，鼠标划出main区域后，好像定时器重复调用了，轮播效果不对。麻烦您帮看下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3-8项目作业</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="main" id="main">
<!-- 切换标题 -->
<div class="nav" id="nav">
<div class="nav-dom dom-active">首页</div>
<div class="nav-dom">点击看看</div>
<div class="nav-dom">会自动的</div>
<div class="nav-dom">我的网站</div>
</div>
<!-- 切换图片-->
<div class="banner" id="banner">
<a href="">
<div class="banner-slide slide1 slide-active"></div>
</a>
<a href="">
<div class="banner-slide slide2"></div>
</a>
<a href="">
<div class="banner-slide slide3"></div>
</a>
<a href="">
<div class="banner-slide slide4"></div>
</a>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
}
a{
text-decoration: none;
}
a:hover,a:visited{
color: #5e5e5e;
}
/* 总体内容 */
.main{
width: 1200px;
height: 510px;
margin: 50px auto;
position: relative;
border: 1px dotted #666;
}
/* 切换标题样式 */
.nav{
width: 1200px;
height: 50px;
}
.nav-dom{
width: 300px;
height: 50px;
float: left;
font-size: 22px;
color: #666;
background-color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.dom-active{
background-color: #ffcc00;
border-radius: 10px;
font-weight: bold;
color: #555;
}
/* 切换图片样式 */
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner-slide{
width: 1200px;
height: 460px;
display: none;
}
.slide1{
background: url("../img/1.jpg");
}
.slide2{
background: url("../img/2.jpg");
}
.slide3{
background: url("../img/3.jpg");
}
.slide4{
background: url("../img/4.jpg");
}
.slide-active{
display: block;
}
window.onload = function () {
var index = 0;
var timer = "";
var main = byId("main");
var nav = byId("nav");
var navDom = nav.getElementsByTagName("div");
var banner = byId("banner");
var pics = banner.getElementsByTagName("div");
var size = pics.length;
//封装函数获取id
function byId(id) {
return typeof (id) === "string" ? document.getElementById(id) : id;
}
//事件兼容性处理
function addHandler(element, type, handler) {
//非IE浏览器
if (element.addEventListener) {
element.addEventListener(type, handler, true);
//如果是IE浏览器并支持dom2级事件
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
//如果是IE浏览器但不支持dom2级事件
} else {
element["on" + type] = handler;
}
}
//点击切换标题索引来切换图片
for (var j = 0; j < size; j++) {
navDom[j].setAttribute("data-id", j);
addHandler(navDom[j], "click", function () {
index = this.getAttribute("data-id");
changeImg();
})
}
//标题切换及图片切换函数封装
function changeImg() {
for (var i = 0; i < size; i++) {
pics[i].style.display = "none";
navDom[i].className = "nav-dom";
}
pics[index].style.display = "block";
navDom[index].className = "nav-dom dom-active";
}
//自动轮播
function startAutoPlay() {
timer = setInterval(function () {
index++;
if (index >= size) index = 0;
changeImg();
}, 1000)
}
//开始自动轮播
startAutoPlay();
//停止轮播
function stopAutoPlay() {
if (timer) {
clearInterval(timer);
}
}
//当鼠标进入banner图区域时，停止轮播
addHandler(main, "mouseover", stopAutoPlay);
//当鼠标离开banner图区域是，再继续轮播；
addHandler(main, "mouseout", startAutoPlay);
}
正在回答
同学你好， 代码实现效果是可以的， 可以不用修改了。
老师刚测试了一下源码， 也是有这种现象的， 这不是一个bug, 是一个正常的现象哦， 可以忽略
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星