轮播代码按照视频写的，为什么实现的效果不一样呢？麻烦老师看一下，已经写了3遍，还是这样的效果

js代码如下//

var index = 0,

      timer = null,

      pics = byId("banner").getElementsByTagName("div"),

      len = pics.length,

      dots = byId("dots").getElementsByTagName("span"),

       prev = byId("prev"),

       next = byId("next");

function byId(id) {

    return typeof (id) === "string" ? document.getElementById(id) : id;

}

//console.log(len);

function slideImg() {

    var main = byId("main");

    main.onmouseover = function () {

        if (timer) {

            clearInterval();

        }

    }

    main.onmouseout = function () {

        timer = setInterval(function () {

            index++;

            if (index >= len) {

                index = 0;

            }

            changeImg();

        }, 3000)

    }

    main.onmouseout();

    //遍历所有圆点，且绑定事件点击圆点切换图片

    for (var d = 0; d < len; d++) {

        dots[d].id = d;

        dots[d].onclick = function () {

            //改变index当前的索引;

            index = this.id;

            //调用changeinm方法；

            changeImg();

        }

    }

    //点击下一张切换图片

    next.onclick = function () {

        index++;

        if (index >= len) {

            index = 0;

        }

        changeImg();

    }

    prev.onclick = function () {

        index--;

        if (index = 0) {

            index = len - 1;

        }

        changeImg();

    }

}

function changeImg() {

    for (var i = 0; i < len; i++) {

        pics[i].style.display = "none";

        dots[i].className = "";

    }

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

    dots[index].className = "active";

}

slideImg();

html代码如下//

      <div class="main"  id="main">

          <div class="banner" id="banner">

              <a href="">

                  <div class="banner-slide slide1 side-active"></div>

              </a>

              <a href="">

                  <div class="banner-slide slide2"></div>

              </a>

              <a href="">

                  <div class="banner-slide slide3"></div>

              </a>

          </div>

          <!--上一张，下一张-->

          <!--<div class="btn  prev">&lt;</div>

          <div class="btn  next">&gt;</div>-->

            <a href="javascript:void(0)" class="button prev" id="prev"></a>

          <a href="javascript:void(0)" class="button next" id="next"></a>

          <!--小按钮-->

          <div class="dots" id="dots">

              <span class="active"></span>

              <span></span>

              <span></span>

          </div>

      </div>

    <script src="js/lunbo.js"></script>

//css样式代码如下：

* {

    margin: 0px;

    padding: 0px;

    font-family: "微软雅黑";

}

.main {

    width: 1200px;

    height: 460px;

    overflow: hidden;

    margin: 30px auto;

    position:absolute;

    left:50%;

    margin-left:-600px;

}

.banner {

    width: 1200px;

    height: 460px;

    overflow: hidden;

    position:relative;

}

.banner-slide {

    width: 1200px;

    height: 460px;

    position:absolute;

    background-repeat: no-repeat;

    display:none;

}

.side-active{

    display:block;

}

.slide1 {

   background-image:url("../img/banner.jpg");

}

.slide2 {

   background-image:url("../img/bn2.jpg");

}

.slide3 {

   background-image:url("../img/bn3.jpg");

}

/*.btn{

    width:40px;

    height:80px;

    background:rgba(96,96,96,0.5);

    position:absolute;

    left:auto;

    top:50%;

    margin-top:-40px;

    color:#fff;

    font-size:30px;

    line-height:80px;

    text-align:center;

    cursor:pointer;

}*/

.button{

    position:absolute;

    width:40px;

    height:80px;

    background:url(../img/arrow.png) no-repeat center center;

    top:50%;

    margin-top:-40px;

    left:244px;

}

.button:hover{

    background-color:#333;

    opacity:0.5;

    filter:alpha(opacity=20);

}

.prev{

    transform:rotate(180deg);

}

.next{

    left:auto;

    right:0px;

}

.dots{

    position:absolute;

    right:50px;

    bottom:24px;

    text-align:center;

}

.dots span{

    display:inline-block;

    width:12px;

    height:12px;

    line-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;

    margin-left:10px;

}

.dots span.active{

    box-shadow:0 0 0 2px rgba(7,17,27,0.4) inset; 

    background:#fff;

}