3-4图片自动轮播

老师

function changeImg(){

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

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

<!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>

qq_鸭绿桥第一帅哥_0 2018-12-21

源自：项目：JS实现轮播特效 3-4 图片自动轮播