关于点击按钮不能切换的问题
<!DOCTYPE html> <html> <head> <title>6-2homework</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/zuoye.css"> </head> <body> <div class="biaoqian" id="biaoqian"> <a href=""><div class="item">首页</div></a> <a href=""><div class="itemn">点击</div></a> <a href=""><div class="itemn">查看</div></a> <a href=""><div class="itemn">网页</div></a> <!-- item为显示的标签，itemn为不显示的标签 --> </div> <div class="main" id="main"> <div class="picshow"><a href=""><img src="img/1.jpg" ></a></div> <div class="nop"><a href=""><img src="img/3.jpg"></a></div> <div class="nop"><a href=""><img src="img/4.jpg" ></a></div> <div class="nop"><a href=""><img src="img/5.jpg" ></a></div> <!-- picshow为显示的内容，nop为不显示的内容 --> </div> <script type="text/javascript" src="js/zuoye.js"></script> </body> </html>
var biaoqian=document.getElementById("biaoqian").getElementsByTagName("div"),
main=document.getElementById("main").getElementsByTagName("div"),
index=0,
timer=null,
leng=biaoqian.length;
function settime(){
timer=setInterval(
// 为什么要给set命名为timer，命名后是否触发？
function(){
index++;
if(index>=leng){
index=0;
}
changeimg();
},3000
)
}
function outtime(){
if(timer){
clearInterval(timer);
}
}
function changeimg(){
for(var i=0;i<leng;i++){
biaoqian[i].className="itemn";
main[i].className="nop";
}
biaoqian[index].className="item";
main[index].className="picshow";
console.log("change"+index);
}
function start(){
document.getElementById("main").onmouseover=function(){
outtime();
}
document.getElementById("main").onmouseout=function(){
settime();
}
settime();
for(var j=0;j<leng;j++)
{
biaoqian[j].id=j;
console.log(biaoqian);
biaoqian[j].onclick=function()
{
index=this.id;
console.log(index);
changeimg();
}
}
}
start();*{
margin:0px;
padding:0px;
font-family:"Microsoft YaHei";
}
a{
text-decoration: none;
}
.main{
position:relative;
width:1200px;
height:460px;
margin:0 auto;
}
.main div{
width:1200px;
height:460px;
}
.biaoqian div{
width:300px;
height:30px;
display:inline-block;
border-radius: 5px;
font-size:22px;
text-align: center;
color:#666;
}
.biaoqian{
width:1200px;
height:30px;
margin:30px auto 0 auto;
font-size:0px;
}
.itemn{
background-color: white;
}
.item{
background-color: #ffcc00;
}
.picshow{
display:block;
}
.nop{
display:none;
}你好，点击顶部标签不能切换图片，帮忙看下是哪里的问题，谢谢！
19
收起
正在回答 回答被采纳积分+1
2回答
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星