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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!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();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

*{
    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