作业题定时器没效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作业练习</title>
</head>
<link rel="stylesheet" href="css/css.css">
<body>
<!-- 导航栏部分 -->
<div class="content">
<ul>
<li class="active"><a href="">首页</a></li>
<li><a href="">点击看看</a></li>
<li><a href="">会自动的</a></li>
<li><a href="">我的网站</a></li>
</ul>
</div>
<!-- 轮播图部分 -->
<div class="banner" id="banner">
<div class="banner-slide slide-active">
<a href="">
<img src="img/1.jpg" alt="">
</a>
</div>
<div class="banner-slide">
<a href="">
<img src="img/3.jpg" alt="">
</a>
</div>
<div class="banner-slide">
<a href="">
<img src="img/4.jpg" alt="">
</a>
</div>
<div class="banner-slide">
<a href="">
<img src="img/5.jpg" alt="">
</a>
</div>
</div>
<script type="text/javascript" src="js/demo.js"></script>
</body>
</html>
//css部分
*{
margin: 0;
padding: 0
}
a{
text-decoration:none;
color: #666;
}
li{
list-style-type:none;
}
html,body{
width: 100%;
height: 100%;
}
.content{
width: 1200px;
height: 50px;
line-height: 50px;
background: #fff;
margin: 0 auto;
}
.content li{
float: left;
font-size:22px;
}
.content li a{
display: block;
width: 300px;
display: flex;
flex-direction: row;
justify-content: center;
}
li.active{
background-color: #FFCC00;
}
.banner{
width: 1200px;
height:460px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.banner-slide{
position: absolute;
display: none;
}
.slide-active{
display: block;
}
//js部分
var timer=null,
index=0,
pics=document.getElementById('banner').getElementsByTagName("div"),
len=pics.length;
function slideImg(){
// 鼠标划过清除定时器，离开继续
pics.onmouseover=function(){
// 绑定事件，鼠标划过清除定时器
if(timer){
clearInterval(timer);
}
}
pics.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
// 调用切换图片函数
chageImg()
},3000);
}
pics.onmouseout();
}
// 图片切换
function chageImg(){
// 遍历banner下的所有div,将其隐藏
for(var i=0;i<len;i++){
pics[i].style.display="none";
}
// 通过索引找到当前div，将其显示
pics[index].style.display="block";
}
slideImg()；
定时器添加了没效果
正在回答
你好，虽然说区域是相同的，但是内容并不同呀，而且获取到的pics是一个集合哟，其中有好几张图片，并不是具体的元素哟。
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星