当点击切换页的选项上时，为什么不出现该选项的对应图片，除非连击三下？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合实例--轮播图</title>
<link rel="stylesheet" type="text/css" href="css/wc.css">
</head>
<body>
<div class="main" id="main">
<div class="button" id="button">
<a href="">首页</a>
<a href="">点击看看</a>
<a href="">会自动的</a>
<a href="">我的网站</a>
</div>
<div class="banner" id="banner">
<img src="img/1.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
</div>
</div>
<script src="js/wc.js" type="text/javascript" charset="utf-8" async defer></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-family: "Microsoft YaHei";
}
.main{
width: 1200px;
height: 510px;
margin: 0 auto;
}
.button{
width: 1200px;
height: 50px;
margin: 0 auto;
}
.button a{
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
font-size: 22px;
font-weight: bold;
color: #666;
text-decoration: none;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner img{
width: 1200px;
height: 460px;
float: left;
background-repeat: no-repeat;
cursor: pointer;
}
var buts=document.getElementById("button").getElementsByTagName("a"),
bans=document.getElementById("banner").getElementsByTagName("img"),
main=document.getElementById("main"),
len=bans.length,
index=0,
timer=null;
function sliceImg(){
var main=document.getElementById("main");
//滑过清除定时器，离开继续
main.onmouseover=function(){
if(timer) {
clearTimeout(timer);
}
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg();
},1000);
}
main.onmouseout();
for(var j=0;j<len;j++){
buts[j].id=j;
buts[j].onclick = function(){
index=this.id;
changeImg();
}
}
}
function changeImg(){
for(var i=0;i<len;i++){
bans[i].style.display="none";
buts[i].style.background="none";
}
bans[index].style.display="block";
buts[index].style.background="#ffcc00";
buts[index].style.borderRadius="6px";
}
sliceImg();
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星