为什么轮播后图片覆盖在了当前区域其他元素上面？

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <title>Welcome Dodo!</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="logo">
<img src="imgs/DoDo-logo.png" alt="logo"/>
</div>
<div class="nav">
<ul>
<li>DoDo之心</li>
<li>旅行杂记</li>
<li>DoDo之家</li>
<li>愿望清单</li>
</ul>
</div>
</div>
<!-- 主体 -->
<div class="main">
<!-- 图片 -->
<div class="top" id="top">
<a href="#">
<div class="top-slide slide1 slide-active">
<img src="imgs/首页头元素.jpg">
</div>
</a>
<a href="#">
<div class="top-slide slide2">
<img src="imgs/首页头元素2.jpg">
</div>
</a>
<a href="#">
<div class="top-slide slide3">
<img src="imgs/首页头元素3.jpg">
</div>
</a>

<!-- 前后改变图片按钮 -->
<a href="#" class="change prev"></a>
<a href="#" class="change next"></a>

<!-- 遮罩层 -->
<div class="toplayer"></div>
<div class="toplayer-top">
<div class="word">MY BEAUTIFUL LIFE</div>
<button>LOOK MORE &gt;</button>
</div>
<!-- 圆点提示图片位置按钮 -->
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<!-- 主体中间部分 -->
<div class="middle">
<div class="m-top">
"I want to give good things to record down,<br> after the recall will be very beautiful."
</div>
<!-- 主体中间的图片 -->
<div class="m-bottom">
<div class="m-com">
<img src="imgs/mid-1.jpg">
<div class="desc1">达西庄园</div>
<div class="desc2">美好的下午茶时光</div>
</div>
<div class="m-com">
<img src="imgs/mid-2.jpg">
<div class="desc1">卡里克索桥</div>
<div class="desc2">漫步海边的悬崖索桥</div>
</div>
<div class="m-com">
<img src="imgs/mid-3.jpg">
<div class="desc1">我的学校</div>
<div class="desc2">在天台享受谢菲美景</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div class="title">
FROM THE PHOTO ALBUM
</div>
<div class="mix">
<dl>
<dt><img src="imgs/book.jpg"></dt>
<dd class="word">
Life is like a book, just read more and more refined, more write more carefully. When read, mind open, all things have been indifferent to heart. Life is the precipitation.
</dd>
</dl>
<dl>
<dt><img src="imgs/afternoonTea.jpg"></dt>
<dd class="word">
Life is like a cup of tea, let people lead a person to endless aftertastes. You again good taste, it will always have a different taste, different people will have different taste more.
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 底部 -->
<div class="footer">
© 2019 DoDo跨国宣传部总负责 欢迎联系^_^
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>


function byID( id ){
	return typeof(id) === "string"? document.getElementById(id) : id;
}

var index = 0, timer = null, pics = byID("top").getElementsByTagName("div")
	len = pics.length;


function slideImg(){
	var top = byID("top");
	//划过清除定时器
	top.onmouseover = function(){

	}

	//鼠标移走开始定时器
	top.onmouseout = function(){
		timer = setInterval(function(){
			index = (index+4)%3;
			//切换图片
			console.log(index);
			changeImg();
		}, 5000);

	}
	
}


function changeImg(){
	for(var i = 0; i < len; i++){
		pics[i].style.display = "none";
	}
	pics[index].style.display = 'inline';

}

slideImg();

*{
	padding: 0;
	margin: 0;
}

ul{
	list-style: none;
}

@font-face{
    font-family: 'Special';
    src: url('font/dodo1.ttf') format("truetype");
}

.header{
	width: 100%;
	height: 100px;
	overflow: hidden;
}

.header img{
	height: 100px;
	padding-left: 130px;
}

.header .logo{
	float: left;
}

.header .nav{
	float: right;
	overflow: hidden;
}

.header .nav ul {
	padding-right: 100px;
}

.header .nav ul li{
	list-style: none;
	float: left;
	width: 130px;
	height: 100px;
	line-height: 100px;
	font-size: 18px;
	font-weight: bolder;
	color: gray;
}

.main .top{
	width: 100%;
	height: 400px;
	overflow: hidden;
	position: relative;
}

.main .top .top-slide{
	width: 100%;
	height: 400px;
	background-repeat: no-repeat;
	position: absolute;
	display: none;
	z-index: -1;
}

.main .top .slide-active{
	display:block;
}

.main .top .top-slide img{
	width: 100%;
	height: 400px;
}

.main{
	position: relative;
}

.main .change{
	position: absolute;
	width: 40px;
	height: 80px;
	top: 160px;
	background: url(../imgs/arrow.png) no-repeat center center;
	z-index: 3;

}



.main .change:hover{
	background-color: #333;
	opacity: 0.3;
	filter: alpha(opacity=30);
}

.main .prev{
	transform: rotate(180deg);
}

.main .next{
	right: 0;
}

.main .toplayer{
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #000;
	width: 100%;
	height: 400px;
	opacity: 0.5;
	z-index: 1;
}

.main .dots{
	position: absolute;
	right: 25px;
	top: 355px;
	text-align: right;
	z-index: 10;

}

.main .dots span{
	display: inline-block;
	width: 12px;
	height: 12px;
	line-height: 12px;
	border-radius: 50%;
	background: rgba(7,17,27, 0.2);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6) inset;
	margin-left: 8px;
	cursor: pointer;

}

.main .dots .active{
	box-shadow: 0 0 0 2px rgba(7,17,27, 0.8) inset;
	background-color: #fff;
}

.main .toplayer-top{
	position: absolute;
	top: 200px;
	left: 50%;
	width: 500px;
	height: 200px;
	margin-top: -100px;
	z-index: 2;
	margin-left: -250px;
}

.main .toplayer-top .word{
	padding-top: 30px;
	padding-bottom: 20px;
	color: #fff;
	font-size: 40px;
	font-weight: bolder;
	text-align: center;
	font-family: "微软雅黑";
}

.main .toplayer-top button{
	width: 200px;
	height: 60px;

	margin-top: 30px;
	color: #fff;
	text-align: center;
	font-family: "微软雅黑";
	background-color: #6495ED;
	font-size: 14px;
	font-weight: bolder;
	border-radius: 8px;
	margin-left: 150px;
}

.main .middle{
	width: 1000px;
	margin:0 auto;
}

.main .middle .m-top{
	font-size: 26px;
	color: #D2B4DE;
	padding-top: 50px;
	font-style: italic;
	text-align: center;;
	padding-bottom: 50px;
	font-family: "Times New Roman";
}

.main .middle .m-bottom{
	overflow: hidden;
}

.main .middle .m-bottom .m-com{
	float: left;
	padding: 10px;
	text-align: center;
	font-weight: bolder;
}

.main .middle .m-bottom .m-com img{
	width: 300px;
	height: 300px;
}

.main .middle .m-bottom .m-com .desc1{
	font-size: 20px;	
	color: #7D7D7F;
	margin-top: 20px;
}

.main .middle .m-bottom .m-com .desc2{
	font-size: 18px;
	color: #BDBDBC;
	margin-top: 10px;
	text-align: center;
}

.main .bottom{
	background-color: #EAEDED;
}

.main .bottom .content{
	width: 1000px;
	margin:0 auto;
	text-align: center;
}

.main .bottom .content .title{
	font-size: 23px;
	font-weight: bold;
	color: #7D7C7F;
	padding-top: 50px;

}

.main .bottom .content .mix{
	overflow: hidden;
}

.main .bottom .content .mix dl{
	float: left;
	width: 450px;
	padding: 20px;
	padding-top: 40px;
	
}

.main .bottom .content .mix img{
	width: 400px;
}

.main .bottom .content .mix dl .word{
	font-family: Special;
	padding-top: 20px;
	font-size: 18px;
	font-weight: bolder;
	color: #7D7C7F;
	padding-bottom: 50px;
}

.footer{
	width: 100%;
	height: 100px;
	background-color: #292C35;
	color: white;
	font-size: 15px;
	text-align: center;
	line-height: 100px;
}

慕莱坞6206856 2019-01-18

源自：项目：JavaScript轮播图 3-5 图片的自动轮播和停止

收起

1回答

好帮手慕阿满回答被采纳获得+3积分 2019-01-18 13:48:14

同学你好，同学是说图片轮播覆盖了主体部分的上边吗？因为同学将轮播的图片及样式也设置到主体的上边，所以轮播图片覆盖了MY BEAUTIFUL LIFE的元素。建议同学在主体上边再加一个div，使其作为图片轮播的区域，再给该区域设置图片及轮播样式。

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

收起回答

慕莱坞6206856 提问者 #1

我自己解决了，是因为获取的元素是所有的div元素，所以我给需要更改的图片加了一个name属性，然后获取该类的元素就好了

2019-01-18 21:33:11
慕莱坞6206856 提问者 #2

老师的解决方式也是对的，增加一个div单独涵盖轮播图片元素也可以解决。我应该注意输出调试数组的长度，之前没有关注这一点。哈哈哈，谢谢老师。

2019-01-18 21:34:40