关于轮播图6-2的问题。

<!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图效果)
阿卡斯
浏览 1106回答 1
1回答

随时随地看视频慕课网APP