6-2作业

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/css1.css">
</head>
<body>
 <div class="a">
  <div class="b">
   <div>首页</div>
   <div>点击查看</div>
   <div>会自动的</div>
   <div>我的网页</div>
  </div>
  <div class="c" id="main">
   <a href="" class="s"><img src="1.jpg"></a>
   <a href=""><img src="5.jpg"></a>
   <a href=""><img src="3.jpg"></a>
   <a href=""><img src="4.jpg"></a>
  </div>
 </div>
 <script type="text/javascript" src="js/script1.js">
 </script>
</body>
</html>
css部分：
.b{
 width: 1200px;
 height: 60px;
 overflow:hidden;
 zoom:1;
}
.b div{
 width: 300px;
 height: 30px;
    margin-top: 30px;
 float: left;
 text-align: center;
    color: #666;
    font-size: 20px;
 }
.c{
 width:1200px;
 height: 540px;
 position: relative;
}
.c a{position: absolute;
  display:none;
    }
.c .s{
 display: block;
}
js部分
function byid(id){
 //封装函数
 return document.getElementById(id);
}
  var timer=null,
      i=0,
      a=byid("main").getElementsByTagName("a"),
      len=a.length;
function huaguo(){
  var main=byid("main");
  main.onmouseover=function(){
    clearInterval();
  }
  main.onmouseout=function(){
   timer=setInterval(function(){
    i++;
    if(i>=len){
     i=0;
    }
        for(var b=0;b<len;b++){
        a[i].style.display="none";
        }
    a[i].style.display="block";
   },1000);
  }
}

weixin_慕哥8086897 2019-01-10

源自：项目：JS实现轮播特效 6-2 作业题