3-4图片自动轮播

老师

function changeImg(){

pics[index].style.display="block";

}按照视频中，应该在鼠标触碰离开后，图片能自动轮播到最后一张图然后停止。然而我测试时图片一直停留在第一张图，无法实现轮播。为什么？

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>b</title>
  <!-- <link rel="stylesheet" type="text/css" href="css/styleb.css">  -->
  <style type="text/css">
    *{
  margin: 0;
  padding: 0;
}
ul{
  list-style: none;
}
body{
  font-family: "微软雅黑";
}
.main,.banner,.banner-slide{
  width: 1200px;
  height: 460px;
}
.main{
  margin: 30px auto;
  position: relative;
  overflow: hidden;
}
.banner{overflow: hidden;}
.banner-slide{display: none;}
.slide1{
  background-image: url('../img/bg1.jpg');
}
.slide2{
  background-image: url('../img/bg2.jpg');
}
.slide3{
  background-image: url('../img/bg3.jpg');
}
.slide-active{display: block;}
.button{
  width: 40px;
  height: 80px;
  background:url('../img/arrow.png') no-repeat center center;
  position: absolute;
    top: 50%;
    margin-top: -40px;
    left: 244px;
}
.next{
  left: auto;
  right: 0;
}
.prev{
  transform: rotate(180deg);
}
.button:hover{
  background-color:gray;
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.dots{
  position: absolute;
  bottom: 24px;
  right: 20px;
}
.dots span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background:rgba(7,17,27,0.4);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.8) inset;
  display: inline-block;
  margin-left: 8px;
  cursor: pointer;
}
span.active{
  background:white;
  box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;
}
  </style>
</head>
<body>
  <div class="main" id="main">
    <!-- 图片轮播 -->
    <div class="banner" id="banner">
      <a href=""><div class="banner-slide slide1 slide-active"></div></a>
      <a href=""><div class="banner-slide slide2"></div></a>
      <a href=""><div class="banner-slide slide3"></div></a>      
    </div>
    <!-- 按钮-->
    <a href="javascript:void(0)" class="button prev"></a>
    <a href="javascript:void(0)" class="button next"></a>
    <!-- 圆点 -->
    <div class="dots" id="dots">
      <span class="active"></span>
      <span></span>
      <span></span> 
    </div>
  </div>
  <script type="text/javascript">
    function byId(id)
{
  return typeof(id)==='string'?document.getElementById(id):id;
}
var main=byId('main'),
    timer=null,
    index=0,
    len=byId('banner').getElementsByTagName('div').length,
    pics=byId('banner').getElementsByTagName('div');
 
function picSlide(){
  main.onmouseover=function(){
       // 清除定时器
  }
  main.onmouseout=function(){
    setInterval(function(){
           index++;
           if(index>=len)
           {
            index=0;
           }
           changeImg();
    },2000)
  }
}
function changeImg(){
   // for(var i=0;i<len;i++)
   // {
   //   pics[i].style.display='none';
   // }
   pics[index].style.display="block";
}
picSlide();
  </script>
</body>
</html>