老师。麻烦帮我修改一下吧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="作业.css"/>
</head>
<body>
<div class="main" id="main">
<div class="content">
<span class="cont"><a href="#">首页</a></span>
<span ><a href="#">点击看看</a></span>
<span ><a href="#">对自动的</a></span>
<span ><a href="#">网站</a></span>
</div>
<div class="banner" id="banner">
<a href="">
<div class="slider slide1"></div>
</a>
<a href="">
<div class="slider slide2"></div>
</a>
<a href="">
<div class="slider slide3"></div>
</a>
<a href="">
<div class="slider slide4"></div>
</a>
</div>
</div>
<script type="text/javascript" src="作业.js">
</script>
</body>
</html>
*{margin:0;padding: 0;}
.main{
width: 1200px;
height: 498px;
overflow: hidden;
border-radius: 15px;
border: 1px solid black;
}
a{
text-decoration: none;
color: gray;
}
.content{
width: 1200px;
height: 80px;
font-family: "微软雅黑";
}
.cont{
background-color: #ffcc00;
}
span{
display: inline-block;
width: 300px;
font-weight:bold;
font-size: 22px;
float: left;
text-align: center;
height: 80px;
line-height: 80px;
}
.banner{
height: 420px;
width: 1200px;
overflow: hidden;
position: relative;
}
.slide{
height: 420px;
width: 1200px;
position: absolute;
background-repeat: no-repeat;
display: none;
}
.slide1{
background-image: url(img/1.jpg);
}
.slide2{
background-image: url(img/3.jpg);
}
.slide3{
background-image: url(img/4.jpg);
}
.slide4{
background-image: url(img/5.jpg);
}
var index=0,
timer=null,
pics=byId("banner").getElementsByClassName("slider"),
size=pics.length,
spa=byId("content").getElementsByTagName("a")
;
function addHandler(element, type, handler){
if(element.addEventListener){
element.addEventListener(type, handler, true)
}else if(element.attchEvent){
element.attchEvent("on"+ type, handler)
}else{
element["on"+type]=handler
}
}
function byId(id){
return typeof(id)=="string"?document.getElementById("id"):id;
}
function changeImg(){
for (var i=0,len=pics.length;i<len;i++) {
pics[i].style.display="none";
spa[i].className=""
}
pics[index].style.display="block";
spa[index].className="cont"
};
addHandler()
//自动轮播
function starAutoPlay(){
timer=setInterval(function(){
index++;
if(index>=size){
index=0;
}
changeImg()
},3000)
}
//清除定时器
function stopAutoPlay(){
if(timer){
clearInterval(timer);
}
}
//点击按钮实现轮播
for(var j=0,jlen=spa.length;j<=jlen;j++){
spa[j].setAttribute("data-ind",j);
addHandler(spa[j],"click",function(){
index=this.getAttribute["data-ind"];
changeImg();
})
}
addHandler(main,"mouseover",stopAutoPlay);
addHandler(main,"mouseout",starAutoPlay);
starAutoPlay();
正在回答 回答被采纳积分+1
同学你好，问题如下
1、没有获取到pics，因为封装byId函数时，有错误（id不是字符串形式的）。
正确书写：
2、因为class是加在span元素上的，所以获取span元素就可以了。
代码参考：
3、没有获取到spa，因为没有id为content的元素。
建议：添加id为content的元素。
代码参考：
4、图片没有显示出来，原因是背景不能撑起宽高，要设置宽高。
代码参考：
5、页面没有居中显示，建议使用margin属性设置居中。
代码参考：
6、要注意单词书写的正确性。正确书写attachEvent。
7、addHandler函数不用执行。否则会报错
8、导航在点击时或者是自动轮播到哪一项时，字体是加粗的。
代码参考：
9、获取属性时，应该使用();
代码参考：
10、自动轮播时间是1000哦，
如果帮助到了你，欢迎采纳~祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星