JavaScript、tabel切换完整版—自动切换—鼠标移入停止-移开运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
      .wrap{
          width: 510px;
          margin: 0 auto;
          overflow: hidden;
            position: relative;
      }
      .caktye{
          width: 9999px;
          overflow: hidden;
          position: relative;
          left: 0;
      }
      .main{
          text-align: center;
            position: absolute;
            bottom: 10px;
            left: 35%;

      }
      .main button{
          width: 25px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            border-radius: 25px;
            display: inline-block;
            border: none;
      }
      .active{
          background-color: yellow;
      }
      .caktye a{
          float: left;
      }
      .caktye img {
            display: block;
            width:510px;
        }
      #prevBtn{
            display: block;
            position: absolute;
            left: 5px;
            bottom: 45%;
            width: 15px;
            height: 15px;
            border-left: 5px solid ;
            border-top: 5px solid ;
             border-color: rgba(255,255,255,0.5);
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
      }
      #nextBtn{
            display: block;
            position: absolute;
            right: 5px;
            bottom: 45%;
            width: 15px;
            height: 15px;
            border-right: 5px solid;
            border-top: 5px solid;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            border-color: rgba(255,255,255,0.5);
      }

    </style>
</head>
<body>
  
    <div class="wrap">
      <div class="caktye" id="inner">
        <a href="###"><img src="img/1.jpg"></a>
        <a href="###"><img src="img/2.jpg"></a>
        <a href="###"><img src="img/3.jpg"></a>
        <a href="###"><img src="img/4.jpg"></a>
        <a href="###"><img src="img/5.jpg"></a>
      </div>
        <div class="main">
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
            <button>5</button>
      </div>
      <div>
            <a href="###" id="prevBtn"></a>
            <a href="###" id="nextBtn"></a>

      </div>
    </div>     
    <script type="text/javascript">
      var innerList = document.getElementById("inner");
      var btnList = document.getElementsByTagName("button");
      var perWidth =  inner.children[0].offsetWidth;
      var prevBtn = document.getElementById("prevBtn");
      var nextBtn = document.getElementById("nextBtn");
      
      function tab(){
            inner.style.left= -perWidth * index + "px"
                  for(var j=0;j<btnList.length; j++){
                        btnList[j].className="";
                  }
                  btnList[index].className="active";
      }
      function next() {
            index++;
            if(index > btnList.length - 1) {
                  index = 0;
            }
            tab();
      }
      function prev() {
            index--;
            if(index < 0) {
                  index = btnList.length - 1;
            }
            tab();
      }

      for(var i=0;i<btnList.length;i++){
            btnList[i].index=i;
            btnList[i].onclick =function(){
                index=this.index;
                tab();
            }

      }
      var index=0;
      function xunhuan(){
           index++;
     
               if(index>btnList.length -1){
                  index=0;
               }
           tab();
      }

     var  timer =setInterval(xunhuan,2000);

      inner.onmouseover =function(){
          clearInterval(timer);
      }
      inner.onmouseout =function(){
        timer = setInterval(xunhuan,2000);
      }

     //下一张
      nextBtn.onclick = function() {
            clearInterval(timer);
            next();
            timer = setInterval(next,2000);
      }

      //上一张 
      prevBtn.onclick = function() {
            clearInterval(timer);
            prev();
            timer = setInterval(next,2000);
      }
    </script>
</body>
</html>