js原生轮播图

//轮播图
  var bannerSlider = document.getElementById("banner-slider"); //外层小框
  var right = document.getElementsByClassName("btn-next")[0];
  var left = document.getElementsByClassName("btn-pre")[0];
  var img = document.getElementsByClassName("slider-item");
  var sliderContent = document.getElementsByClassName("slider-content")[0]; //内层，图片left框
  var pagination = document.getElementsByClassName("pagination");
  var imgWidth = bannerSlider.offsetWidth;
  var index = 1;
  var animated=false;
  var timer;

  function showButton(index) {
    for (let i = 0; i < pagination.length; i++) {
      pagination[i].className = "pagination ";
    }
    pagination[index-1].className = "pagination active";
  }

  function animate(offset) {
    var newLeft = parseInt(sliderContent.style.left) + offset;
    
    var time=300;
    var interval=10;
    var speed=offset/(time/interval);
    // console.log(speed);

    animated=true;
    function go() {
      // if((speed<0&&parseInt(sliderContent.style.left)>newLeft)||(speed>0&&parseInt(sliderContent.style.left)<newLeft)){
      //   sliderContent.style.left=parseInt(sliderContent.style.left)+speed+'px';
      //   setTimeout(go,interval);
      // }else{
        animated=false;
        sliderContent.style.left = newLeft + 'px';
        if (parseInt(sliderContent.style.left) < -5 * imgWidth) {
          sliderContent.style.left = -imgWidth + 'px';
        }
        if (parseInt(sliderContent.style.left) > -imgWidth) {
          sliderContent.style.left = -5 * imgWidth + 'px';
        }
      // }
    }
    go();
  }

  right.onclick = function () {
    // if(!animated){
      animate(-imgWidth);
    // }
    
    if(index==5){
      index=1;
    }else{
      index += 1;
    }
    showButton(index);

  }
  left.onclick = function () {
    // if(!animated){
      animate(imgWidth);
    // }
    
    if(index==1){
      index=5
    }else{
      index-=1;
    }
    showButton(index);
  }

  for(let i=0;i<pagination.length;i++){
    pagination[i].onclick=function () {
      if(this.className=='pagination active')return;
      var myIndex=parseInt(this.getAttribute('index'));
      console.log(myIndex);
      var offset=-imgWidth*(myIndex-index);
      animate(offset);
      index=myIndex;
      showButton(index);
    }
  }

  function play() {
    timer=setInterval(function () {right.onclick();  },3000);
  }
  bannerSlider.onmouseover = function() {
    clearInterval(timer);
  };
  bannerSlider.onmouseout = function() {
    play();
  };

  play();

<div class="item banner-slider shadow">
                                <div class="slider" id="banner-slider">
                                    <div class="slider-content clearfix" style="width:23850px;left:-550px;">
                                        <!-- 附属图，第0张 -->
                                            <div class="slider-item">
                                                    <a href="">
                                                        <div class="slider-img-div slider-img-div-5">
                                                            <img src="./images/slider-img-div-5.jpg" alt="" class="img-zheng-zheng">
                                                        </div>
                                                    </a>
                                                </div>
                                        <!-- 第一张图 -->
                                        <div class="slider-item" id="sliderItem">
                                            <a href="">
                                                <div class="slider-img-div slider-img-div-1">
                                                    <img src="./images/slider-img-div-1.jpg" alt="" class="img-zheng-zheng">
                                                </div>
                                            </a>
                                        </div>
                                        <!-- 第二张图 -->
                                        <div class="slider-item">
                                            <a href="">
                                                <div class="slider-img-div slider-img-div-2">
                                                    <img src="./images/slider-img-div-2.jpg" alt="" class="img-zheng-zheng">
                                                </div>
                                            </a>
                                        </div>
                                        <!-- 第三张图 -->
                                        <div class="slider-item">
                                            <a href="">
                                                <div class="slider-img-div slider-img-div-3">
                                                    <img src="./images/slider-img-div-3.jpg" alt="" class="img-zheng-zheng">
                                                </div>
                                            </a>
                                        </div>
                                        <!-- 第四张图 -->
                                        <div class="slider-item">
                                            <a href="">
                                                <div class="slider-img-div slider-img-div-4">
                                                    <img src="./images/slider-img-div-4.jpg" alt="" class="img-zheng-zheng">
                                                </div>
                                            </a>
                                        </div>
                                        <!-- 第五张图 -->
                                        <div class="slider-item">
                                            <a href="">
                                                <div class="slider-img-div slider-img-div-5">
                                                    <img src="./images/slider-img-div-5.jpg" alt="" class="img-zheng-zheng">
                                                </div>
                                            </a>
                                        </div>
                                        <!-- 附属图，第六张 -->
                                        <div class="slider-item">
                                            <a href="">
                                                <div class="slider-img-div slider-img-div-5">
                                                    <img src="./images/slider-img-div-1.jpg" alt="" class="img-zheng-zheng">
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="slider-pagination" id="banner-sliderpage" style="margin-left:-45px;">
                                        <div class="pagination active" index='1'></div>
                                        <div class="pagination" index='2'></div>
                                        <div class="pagination" index='3'></div>
                                        <div class="pagination" index='4'></div>
                                        <div class="pagination" index='5'></div>
                                    </div>
                                    <div class="btn btn-next">
                                        <i class="iconfont icon-you"></i>
                                    </div>
                                    <div class="btn btn-pre">
                                        <i class="iconfont icon-you"></i>
                                    </div>
                                </div>
                            </div>