原生JS兼容移动端的轮播图

关于轮播图 :

• 原生JS
• 兼容IE9+等各大浏览器
• 兼容移动端
• 自适应（根据图片原比例）
• 左右箭头切换
• 点击索引切换
• 移动端滑动切换
• 只需修改图片路径
  

<div class="carousel">
 <div id="banner">
   <ul class="clearfix slide">
     <li><a href="#"><img src="images/1.jpg"><span>1</span></a></li>
     <li><a href="#"><img src="images/2.jpg"><span>2</span></a></li>
     <li><a href="#"><img src="images/3.jpg"><span>3</span></a></li>
     <li><a href="#"><img src="images/4.jpg"><span>4</span></a></li>
     <li><a href="#"><img src="images/5.jpg"><span>5</span></a></li>
     <li><a href="#"><img src="images/6.jpg"><span>6</span></a></li>
     <li><a href="#"><img src="images/7.jpg"><span>7</span></a></li>
     <li><a href="#"><img src="images/8.jpg"><span>8</span></a></li>
   </ul>
   <!--左右切换箭头-->
   <span class="switchBtn" id="prevBtn"><img src="images/arrow.png" class="prevArrow" alt=""></span>
   <span class="switchBtn" id="nextBtn"><img src="images/arrow.png" class="nextArrow" alt=""></span>
   <!--轮播索引的点-->
   <ul class="ctrl"></ul>
 </div>
</div>

    var banner = document.getElementById('banner');//轮播盒子
    var width = banner.offsetWidth;
    var imageBox = banner.querySelector('ul.slide');
    var imageCount = imageBox.querySelectorAll('li').length; //图片张数
    var pointBox = banner.querySelector('ul.ctrl');//点盒子
    var prevBtn = document.getElementById("prevBtn"); //向左按钮
    var nextBtn = document.getElementById("nextBtn"); //向右按钮

    var index = 1; //默认开始的图片位置
    var moveSpeed = 2000;//轮播速度
    //动态添加索引
    for(var i = 0;i<imageCount;i++){
      var li = document.createElement("li");
      pointBox.appendChild(li);
      if(i == 0){
        //默认第一个点高亮
        li.className="now"
      }
    }
    var points = pointBox.querySelectorAll('li');//所有的点

  //在第一张前面添加最后一张，最后一张后面添加第一张，防止切换到首尾时出现空白
    var slideFirst = imageBox.querySelector('li:first-child');
    var newLast = slideFirst.cloneNode(true);//复制第一张
    imageBox.appendChild(newLast);//在最后面添加第一张
    var slideLast = imageBox.querySelector('li:nth-last-of-type(2)');//最后一张图片，此时已经在最后面添加了第一张
    var newFirst = slideLast.cloneNode(true);//复制最后一张
    prependChild(imageBox,newFirst);//在最前添加最后一张

    //在最前添加最后一张的方法
    function prependChild(parent,newChild){
      if(parent.firstChild){
        parent.insertBefore(newChild,parent.firstChild);
      } else {
        parent.appendChild(newChild);
      }
      return parent;
    }
    //加过渡
    var addTransition = function(){
      imageBox.style.transition = "all 0.3s";
      imageBox.style.oTransition = "all 0.3s";
      imageBox.style.msTransition = "all 0.3s";
      imageBox.style.mozTransition = "all 0.3s";
      imageBox.style.webkitTransition = "all 0.3s";
    };
    //清除过渡
    var removeTransition = function(){
      imageBox.style.transition = "none";
      imageBox.style.oTransition = "none";
      imageBox.style.msTransition = "none";
      imageBox.style.mozTransition = "none";
      imageBox.style.webkitTransition = "none";
    };
    //定位
    var setTranslateX = function(translateX){
      imageBox.style.transform = "translateX("+translateX+"px)";
      imageBox.style.oTransform = "translateX("+translateX+"px)";
      imageBox.style.msTransform = "translateX("+translateX+"px)";
      imageBox.style.mozTransform = "translateX("+translateX+"px)";
      imageBox.style.webkitTransform = "translateX("+translateX+"px)";
    };

//    判断是否动画结束
    function transitionEnd(dom,callback){
      if(!dom || typeof dom != 'object'){
        return false;
      }
      dom.addEventListener('transitionend', function(){
        callback && callback();
      });
      dom.addEventListener('transitionEnd', function(){
        callback && callback();
      });
      dom.addEventListener('oTransitionEnd', function(){
        callback && callback();
      });
      dom.addEventListener('msTransitionEnd', function(){
        callback && callback();
      });
      dom.addEventListener('mozTransitionEnd', function(){
        callback && callback();
      });
      dom.addEventListener('webkitTransitionEnd', function(){
        callback && callback();
      });
    }
    var timer = null;
//    轮播动画
    function  setTime(){
      timer = setInterval(function(){
        index ++;
        addTransition();
        setTranslateX(-index * width);
        transitionEnd(imageBox,function(){
          if(index == imageCount){
            removeTransition();
            index = 0;
            setTranslateX(-index * width);
          }
        });
        setPoint();
      },moveSpeed);
    }
    setTime();

    //当前图片对应的点高亮
    var setPoint = function(){
      for(var i = 0 ; i < points.length ; i++){
        points[i].className = " ";
      }
      if(index == 0){
        points[imageCount-1].className = "now";
      }
      if(index == imageCount+1){
        points[0].className = "now";
      }
      if(index <= imageCount){
        points[index-1].className = "now";
      }
    };

    //touch事件
    var startX = 0; //记录起始x的坐标
    var moveX = 0;  //滑动的时候x的位置
    var distanceX = 0;  //滑动的距离
    var isMove = false; //是否滑动过
    imageBox.addEventListener('touchstart', function(e){
      startX = e.touches[0].clientX;  //记录起始X
    });
    imageBox.addEventListener('touchmove',function(e){
      moveX = e.touches[0].clientX;   //滑动时候的X
      distanceX = moveX - startX; //计算移动的距离
      removeTransition();
      clearInterval(timer);
      setTranslateX(-index * width + distanceX);  //实时的定位
      isMove = true;
    });
    imageBox.addEventListener('touchend', function(e){
      // 滑动超过 1/3 即为滑动有效，否则即为无效，则吸附回去
      setTime();//避免滑过1/3 又手动划回去而导致轮播结束
      if(isMove && Math.abs(distanceX) > width/3){
        clearInterval(timer);
        //滑动有效时
        if(distanceX > 0){
          //上一张
          prevBtn.click();
        }
        else{
          //下一张
          nextBtn.click();
        }
      }
      addTransition();
      setTranslateX(-index * width);
      setPoint();
      //重置参数
      startX = 0;
      moveX = 0;
      distanceX = 0;
      isMove = false;
    });

    //  左右箭头的切换
    var flag = true;//防止快速点击，需在动画结束后可再次点击
    //  左点击
    prevBtn.onclick = function(){
      if(flag){
        flag = false;
        clearInterval(timer);
        index --;
        addTransition();
        setTranslateX(-index * width);
        transitionEnd(imageBox,function(){
          flag = true; // 可再次点击
          if(index == 0){
            removeTransition();
            index = imageCount;
            setTranslateX(-index * width);
          }
        });
        /**/
        setTimeout(function(){
          setTime();
          setPoint();
        },300);
      }
    };
    //  右点击
    nextBtn.onclick = function(){
      if(flag){
        flag = false;
        clearInterval(timer);
        index ++;
        addTransition();
        setTranslateX(-index * width);
        transitionEnd(imageBox,function(){
          flag = true;//可再次点击
          if(index == imageCount+1){
            removeTransition();
            index = 1;
            setTranslateX(-index * width);
          }
        });
        setTimeout(function(){
          setTime();
          setPoint();
        },300);
      }
    };

    //  点击索引的点
    var ctrl = document.getElementsByClassName("ctrl")[0];
    var ctrlLi = ctrl.querySelectorAll("li");
      for (var i = 0;i < ctrlLi.length; i++) {
        ctrlLi[i].index = i;
        ctrlLi[i].onclick=function(){
          clearInterval(timer);
          index = this.index + 1;
          addTransition();
          setTranslateX(-index * width);
          setPoint();
          setTime();
        }
      }
  };

预览地址：https://bestjhh.github.io/slider/
完整代码：https://github.com/bestjhh/slider