点击导航切换问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container" id="container">
<nav>
<div class="but"><p>首页</p></div>
<div class="but"><p>点击看看</p></div>
<div class="but"><p>会自动的</p></div>
<div class="but"><p>我的网站</p></div>
</nav>
<div class="show" id="show">
<div class="picture one"></div>
<div class="picture two"></div>
<div class="picture thr"></div>
<div class="picture fou"></div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
js
var show=document.getElementById("show"),
pic=document.getElementsByClassName("picture"),
but=document.getElementsByClassName("but"),
index=0,
timer=null,
cont=document.getElementById("container"),
pics=pic.length
function slideImg() {
for(var j=0;j<pics;j++){
but[j].onclick=function () {
for(var i=0;i<pics;i++){
pic[i].style.display = "none";
but[i].style.backgroundColor = "white";
}
but[j].style.backgroundColor="#ffcc00";
pic[j].style.display="block";
}
}
}
slideImg();
相关代码如上，点击后无法切换
正在回答 回答被采纳积分+1
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星