<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{margin:0;padding:0;}
a{text-decoration: none;}
a:link,a:visited{color:#666;}
.main{width:1200px;height:500px;margin:30px auto;overflow:hidden;position:relative;}
.nav-content{width:1200px;height:40px;background:#fff;overflow:hidden:z-index:1;}
.nav-item{width:300px;height:40px;float:left;line-height:40px;text-align:center;font-family:"微软雅黑";color:#666;font-size:22px; border-radius:5px;}
.nav-item:hover{background:#FFCC00;}
.banner{width:1200px;height:460px;overflow:hidden;position:relative;}
.banner-slide{width:1200px;height:460px;display:none;position:absolute;}
.slide-active{display:block;}
</style>
</head>
<body>
<div class="main" id="main">
<div class="nav-content" id="nav-content">
<div class="nav-item"><a href="">首页</a></div>
<div class="nav-item"><a href="">点击查看</a></div>
<div class="nav-item"><a href="">会自动的</a></div>
<div class="nav-item"><a href="">我的网站</a></div>
</div>
<div class="banner" id="banner">
<div class="banner-slide slide-active"><a href=""><img src="img/1.jpg">></a></div>
<div class="banner-slide"><a href=""><img src="img/3.jpg"></a></div>
<div class="banner-slide"><a href=""><img src="img/4.jpg"></a></div>
<div class="banner-slide"><a href=""><img src="img/5.jpg"></a></div>
</div>
</div>
<script type="text/javascript">
function byId(id){
return typeof(id) === "string"?document.getElementById(id):id;
}
var index =0,
timer=null,
pics=byId("banner").getElementsByTagName("div"),
nav=byId("nav-content").getElementsByTagName("div"),
len=pics.length,
len1=nav.length;
function slideImg(){
var main=byId("main");
main.onmouseover=function(){
if(timer)clearInterval(timer);
}
main.onmouseout=function(){
timer=setInterval(function(){
index++;
if(index>=len){
index=0;
}
changeImg();
},1000);
}
main.onmouseout();
}
for(var a=0;a<len1;a++){
nav[a].id = a;
nav[a].onclick = function(){
index = this.id;
changeImg();
}
}
//切换图片
function changeImg(){
for(var i=0;i<len;i++){
pics[i].style.display="none";
// nav[i].className="";
}
pics[index].style.display='block';
// nav[index].className="active";
}
slideImg();
</script>
</body>
</html>问题1：怎么样实现banner图在自动滚动的时候，nav也自动对于的滚动了？（作业的GIF图效果）问题2：当点击nav的文字时候，没有切换到banner指定的图？(作业的GIF图效果)
添加回答
举报
0/150
提交
取消