关于6-2作业问题，点击切换这里出了点问题，大神来帮我看一下
这是HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="css/imooc6-2style.css">
</head>
<body>
<div class="main-box" id="mainBox">
<!---顶部文字区域----->
<div class="top-bar" id="topBar">
<a href="javascript:void(0)" class="button">首页</a>
<a href="javascript:void(0)" class="button">点击查看</a>
<a href="javascript:void(0)" class="button">会自动的</a>
<a href="javascript:void(0)" class="button">我的网站</a>
</div>
<!----图片区域----->
<div class="img-bar" id="imgBar">
<a href="#"><div class="img-box img1 img-active"></div></a>
<a href="#"><div class="img-box img2"></div></a>
<a href="#"><div class="img-box img3"></div></a>
<a href="#"><div class="img-box img4"></div></a>
</div>
</div>
<script src="js/imooc6-2task.js"></script>
</body>
</html>
这是CSS代码：
*{
margin:0;
padding:0;
}
body{
font-family:"微软雅黑";
color:#666;
}
a{
text-decoration:none;
color:#666;
}
.main-box{
width:1200px;
height:520px;
margin:0 auto;
margin-top:20px;
background:#ccc;
overflow:hidden;
position:relative;
}
.top-bar{
width:1200px;;
height:60px;
background:#ff0;
}
.top-bar .button{
display:block;
width:300px;
height:60px;
font-size:22px;
line-height:60px;
text-align:center;
float:left;
}
/*.button:hover{
background:#f00;
opacity:0.7;
filter:alpha(opacity=80);
}*/
.word-active{
background:#0f0;
}
.img-bar{
width:1200px;
height:460px;
overflow:hidden;
position:relative;
}
.img-bar .img-box{
width:1200px;
height:460px;
background:no-repeat;
position:absolute;
display:none;
}
.img-bar .img-active{
display:block;
}
.img-bar .img1{
background-image:url(../sumimg/img/1.jpg);
}
.img-bar .img2{
background-image:url(../sumimg/img/3.jpg);
}
.img-bar .img3{
background-image:url(../sumimg/img/4.jpg);
}
.img-bar .img4{
background-image:url(../sumimg/img/5.jpg);
}
这是JS代码：
//封装一个代替document.getElementById()的方法
function byId(id){
return typeof(id)==="string"?document.getElementById(id):id;
}
//声明全局变量
var index=0,timer=null,topBar=byId("topBar").getElementsByTagName("a"),toplen=topBar.length,imgBar=byId("imgBar").getElementsByTagName("div"),imglen=imgBar.length,topBtn;
//封装图片和顶部文字自动切换
function imgSlide(){
var mainBox=byId("mainBox");
//鼠标滑过整个页面，清除定时器,鼠标标离开整个页面，定时器继续
mainBox.onmouseover = function(){
//鼠标滑过清除定时器
if(timer) clearInterval(timer);
}
mainBox.onmouseout = function(){
//鼠标离开页面定时器开始
timer=setInterval(function(){
index++;
if(index>=imglen){
index=0;
}
//调动切换图片函数自动切换图片
changeImg();
},1000)
}
//自动在mainBox上自动触发鼠标离开的事件
mainBox.onmouseout();
}
//遍历所有的a标签，给每个a标签添加一个ID，绑定点击切换图片和背景改变事件
for(var j=0;j<toplen;j++){
topBar[j].id="btn";
console.log(topBar[j])
}
topBtn=byId("btn");
//封装切换图片函数
function changeImg(){
//遍历所有的div和a标签，div全部隐藏，a标签里的背景颜色都为透明
for(var i=0;i<imglen;i++){
imgBar[i].style.display="none";
topBar[i].style.background="transparent";
}
//这里根据index索引的值去把对应的div的display改为block和改变对应的A标签的背景颜色
imgBar[index].style.display="block";
topBar[index].style.background="#f00";
}
imgSlide();
前面的轮播图片和文字部分的自动切换已经弄好了，但是点击切换相应的图片和文字背景更换出了点问题，就是这段代码：
for(var j=0;j<toplen;j++){
topBar[j].id="btn";
console.log(topBar[j])
}
topBtn=byId("btn");
console.log(topBtn);
这里为什么打印出来，就只有一个首页？接下来怎么完善，求高手指点
正在回答 回答被采纳积分+1
- 参与学习 1887 人
- 提交作业 4643 份
- 解答问题 5760 个
有HTML和CSS基础，却不知道如何进阶？本路径带你通过系统学习，完成从“会做网页”到“做出好的动态网页”的蜕变，迈出成为前端工程师的第一步。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星