原生js实现简单的移动端轮播图效果

近期接触了移动端html5和css3，想加入些轮播图，于是在网上搜集整理了一些资料，经自己补充改进使之较为完善

---

原生JavaScript 移动端web轮播图片

实现功能

1. 索引小圆点
2. 过渡滑动动画的定时轮播
3. 移动端可以滑动切换图片
4. 滑动距离不够则吸附回去

效果图

代码

1. slideshow.html

    

2. slideshow.css

   *,
   ::before,
   ::after{
       padding: 0;
       margin: 0;
       -webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
       box-sizing: border-box;
       -webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
   }
   body{
       font-family:Microsoft YaHei,sans-serif;
       font-size: 14px;
       color: #333;
   }
   ol,ul{
       list-style: none;
   }
   /*清除浮动*/
   .swipe::before,
   .swipe::after{
       content: "";
       display: block;
       height: 0;
       line-height: 0;
       visibility: hidden;
       clear: both;
   }
   
   .layout{
       width: 100%;
       max-width: 750px;
       min-width: 320px;
       margin: 0 auto;
       position: relative;
   }
   .banner{
       width: 100%;
       overflow: hidden;
       position: relative;
   }
   .swipe{
       width: 1000%;
       -webkit-transform: translateX(-10%);
       transform: translateX(-10%);
   }
   .swipe li{
       width: 10%;
       float: left;
   }
   .swipe li a{
       display: block;
       width: 100%;
   }
   .swipe li a img{
       width: 100%;
       display: block;
   }
   .swipe-btn-list{
       position: absolute;
       bottom: 6px;
       width: 100%;
       text-align: center;
   }
   .swipe-btn-list li{
       width: 6px;
       height: 6px;
       border: 1px solid #fff;
       border-radius: 50%;
       display: inline-block;
       margin-left: 10px;
   }
   .swipe-btn-list li:first-child{
       margin-left: 0;
   }
   .swipe-btn-list li.now{
       background: #fff;
   }

    

3. base.js

   /**
    * Improved by yanzuyue on 2018/10/20.
    */
   
   /*封装一些公用的事件或者公用的方法*/
   /*定义的一个命名空间*/
   window.my = {};
   /*封装一个事件 过渡结束事件*/
   my.transitionEnd = function(dom,callback){
       //1.给谁加事件
       //2.事件触发后处理什么业务
       if(!dom || typeof dom != 'object'){
           //没dom的时候或者不是一个对象的时候 程序停止
           return false;
       }
       dom.addEventListener('transitionEnd', function(){
           callback && callback();
       });
       dom.addEventListener('webkitTransitionEnd', function(){
           callback && callback();
       });
   }
   

    

4. slideshow.js

   /**
    * Improved by yanzuyue on 2018/10/20.
    */
   window.onload = function(){
       /*
        * 1.设置定时器 自动轮播 无缝衔接
        * 2.点需要随着轮播的滚动改变对应的点  改变当前样式
        * 3.手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
        * 4.当滑动的距离不超过一定的距离的时候  需要吸附回去
        * 5.当滑动超过了一定的距离 需要跳到下一张或者上一张
        * */
   
       var imageCount = 5; //页面中用来轮播的图片有5张
       var banner = document.querySelector('.banner');//轮播图大盒子
       var width = banner.offsetWidth;//图片的宽度
       var imageBox = document.getElementById("swipe");//图片盒子
       var pointBox = document.getElementById("swipe-btn-list");//点盒子
       var points = pointBox.querySelectorAll('li');//所有的点
   
       //公用方法
       //加过渡滑动动画（CSS3 transition 属性）（根据需要可添加ease,linear等属性）
       var addTransition = function(){
           imageBox.style.transition = "all 0.3s";
           imageBox.style.webkitTransition = "all 0.3s";
       };
       //清除过渡（清除图片的 transition 属性）
       var removeTransition = function(){
           imageBox.style.transition = "none";
           imageBox.style.webkitTransition = "none";
       }
       //设置图片的位置，定位（CSS3 transform 属性）
       var setTranslateX = function(translateX){
           imageBox.style.transform = "translateX("+translateX+"px)";
           imageBox.style.webkitTransform = "translateX("+translateX+"px)";
       }
   	
       //自动轮播  定时器  无缝衔接  动画结束瞬间定位
       var index = 1;
       var timer = setInterval(function(){
           index++;		//自动轮播到下一张
           //改变定位  动画的形式去改变  transition transform translate
           addTransition();    //加过渡动画
           setTranslateX(-index * width);  //定位
   		if(index > imageCount)
   			index = 1;
   		setPoint();
       },3500);//设置每隔3.5秒切换一次
   
       //等过渡结束之后来做无缝衔接
   	my.transitionEnd(imageBox, function(){
           removeTransition(); //清除过渡
           setTranslateX(-index * width);  //定位
       });
   	
       //改变当前样式  当前图片的索引（小圆点）
       var setPoint = function(){
           //清除上一次的now
           for(var i = 0 ; i < points.length ; i++){
               points[i].className = " ";
           }
           //给图片对应的点加上样式
           points[index-1].className = "now";
       }
   
       /*
        手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
        当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
        当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
        */
       //touch事件
       var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
       var moveX = 0;  //滑动的时候x的位置
       var distanceX = 0;  //滑动的距离
       var isMove = false; //是否滑动过
   
       imageBox.addEventListener('touchstart', function(e){
           clearInterval(timer);   //清除定时器
           startX = e.touches[0].clientX;  //记录起始X
       });
   
       imageBox.addEventListener('touchmove',function(e){
           moveX = e.touches[0].clientX;   //滑动时候的X
           distanceX = moveX - startX; //计算移动的距离
           //计算当前定位  -index*width+distanceX
           removeTransition(); //清除过渡
           setTranslateX(-index * width + distanceX);  //实时的定位
           isMove = true;  //证明滑动过
       });
   
       //在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
       imageBox.addEventListener('touchend', function(e){
           // 滑动超过 1/4 即为滑动有效，否则即为无效，则吸附回去
           if(isMove && Math.abs(distanceX) > width/4){
               //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
               if(distanceX > 0){  //上一张
                   index --;
               }
               else{   //下一张
                   index ++;
               }
           }
           addTransition();    //加过渡动画
           setTranslateX(-index * width);    //定位
   
           if(index > imageCount ){
               index = 1;
           }else if(index <= 0){
               index = imageCount;
           }
           setPoint();
   
           //重置参数
           startX = 0;
           moveX = 0;
           distanceX = 0;
           isMove = false;
           //加定时器
           clearInterval(timer);   //严谨 再清除一次定时器
           timer = setInterval(function(){
   			index++;
   			addTransition();
   			setTranslateX(-index * width);
   			if(index > imageCount)
   				index = 1;
   			setPoint();
   		},3500);
       });
   };