老师麻烦看一下为什么导航栏的代码错误呢

首页课程实战体系课手记专栏慕课教程

老师麻烦看一下为什么导航栏的代码错误呢

来源：6-2 作业题

carrienon

2018-05-24 10:35:22

<!doctype html>

<html>

<head>

<title>Document</title>

</head>

<body>

</div>

</div>

</body>

</html>

CSS代码
*{
    margin:0;
	padding:0;
}
body{
	font-family:" Microsoft YaHei";
	color: #fff;
}
.main{
    width:1200px;
	height:510px;
	margin:0 auto;
	cursor:pointer;
}
/*导航栏*/
.nav{
    width:100%;
	height:50px;
}
.nav div{
    width:300px;
	height:100%;
	float:left;
	text-align:center;
	line-height:50px;
	font-size:22px;
}
.nav a{
    text-decoration:none;
	color:#666;
}
/*banner区*/
.banner{
    width:1200px;
	height:460px;
	overflow:hidden;
}
.banner-slide{
    width:100%;
	height:100%;
	background-repeat:no-repeat;
	float:left;
	display:none;
}
.slide-active{
	display:block;
}
.slide1{
    background:url("../img/1.jpg")
}
.slide2{
    background:url("../img/3.jpg")
}
.slide3{
    background:url("../img/4.jpg")
}
.slide4{
    background:url("../img/5.jpg")
}

JS代码
var timer=null,
    index=0,
	banner=getId("banner").getElementsByTagName("div"),
	nav=getId("nav").getElementsByTagName("div"),
	main=getId("main");

function  getId(id){
    return typeof(id)==="string"?document.getElementById(id):id;
}

function stopAutoplay(){
    if(timer){
	    clearInterval(timer);
	}
}

function startAutoplay(){
	timer=setInterval(function(){
        index++;
	    if(index>=banner.length){
	        index=0;
	    }
	    changeImg();
	},1000)
}

function changeImg(){
    for(i=0;i<banner.length;i++){
	    banner[i].style.display="none";
		nav[i].style.backgroundColor="#fff";
	}
	banner[index].style.display="block";
	nav[i].style.backgroundColor="#ffcc00";
}

function slideImg(){
    main.onmouseout=function(){
		startAutoplay();}
    main.onmouseover=function(){
		stopAutoplay();}
	main.onmouseout();

    for(i=0;i<nav.length;i++){
	    nav[i].id=i;
		nav[i].onclick=function(){
		    index=this.id;
			changeImg();
		}
	}
}

slideImg();

写回答

1回答