<!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="">首頁(yè)</a></div>
???<div?class="nav-item"><a?href="">點(diǎn)擊查看</a></div>
???<div?class="nav-item"><a?href="">會(huì)自動(dòng)的</a></div>
???<div?class="nav-item"><a?href="">我的網(wǎng)站</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>問(wèn)題1：怎么樣實(shí)現(xiàn)banner圖在自動(dòng)滾動(dòng)的時(shí)候，nav也自動(dòng)對(duì)于的滾動(dòng)了？（作業(yè)的GIF圖效果）問(wèn)題2：當(dāng)點(diǎn)擊nav的文字時(shí)候，沒(méi)有切換到banner指定的圖？(作業(yè)的GIF圖效果)
關(guān)于輪播圖6-2的問(wèn)題。
阿卡斯
2017-06-16 23:20:24