原生JS实现移动端轮播图

功能描述：

自动无缝轮播图片，底部小圆点跟图片保持一致；手指左右移动轮播图，移动距离大于50px播放下一张（或上一张），小于50px则回弹

具体功能实现：

1.定时器 自动轮播图片

先声明一个index=0用来存图片索引；

添加一个定时器，每隔两秒调用一次，每调用一次定时器（图片播放一次）index就加一；

通过transform（变形）属性和transition（过渡）属性实现图片的轮播。

 var index = 0;
 var timer = setInterval(function() {
     index++;
     var translatex = -index * w;  // ul要移动的距离
     ul.style.transition = 'all .4s';
     ul.style.transform = 'translateX(' + translatex + 'px)';
 }, 2000);

2.实现无缝轮播并让小圆点和图片一致

给ul绑定监听函数（每次轮播移动的都是整个ul），过渡结束（transitionend）时执行；

判断索引index是否大于等于3，是的话说明已经播放到最后一张，让index=0并去掉过渡效果，快速回到第一张；

判断索引是否小于0，小于0说明用户一开始是往前滑的，让index=2并去掉过渡效果，快速到最后一张；

让底部小圆点跟着一起动（给当前li添加类，把其他的li删除类）

 ul.addEventListener('transitionend', function() {
     if(index >= 3) {
         index = 0;
         ul.style.transition = '';  // 去掉过渡效果
         var translatex = -index * w;
         ul.style.transform = 'translateX(' + translatex + 'px)';
     } else if(index < 0) {
         index = 2;
         ul.style.transition = '';
         var translatex = -index * w;
         ul.style.transform = 'translateX(' + translatex + 'px)';
     }
     // 让底部小圆点跟着一起动
     // 将带有current类的li去掉该类
     ol.querySelector('.current').classList.remove('current');
     // 给当前li添加current类
     ol.children[index].classList.add('current');
 })

3.实现图片跟随手指移动先声明几个变量用来存储手指初始位置、手指是否在屏幕上移动以及手指移动的距离

var startX = 0;    // 手指初始位置
var moveX = 0;     // 手指在屏幕上移动的距离
var flag = false;    // 记录用户是否移动了手指

给ul绑定手指触摸事件，记录手指触摸的初始位置，并清除定时器（不让它自动轮播了）

 ul.addEventListener('touchstart', function(e) {
     startX = e.targetTouches[0].pageX;  // 手指的初始触摸位置（左右轮播，只记录x就可以了）
     clearInterval(timer);
 })

给ul绑定手指移动事件

 ul.addEventListener('touchmove', function(e) {
     moveX = e.targetTouches[0].pageX - startX;   // 手指移动的距离
     var translatex = -index * w + moveX;
     ul.style.transition = 'none';
     ul.style.transform = 'translateX(' + translatex + 'px)';
     flag = true;    // 手指移动了，将flag改为true
     e.preventDefault();   // 阻止屏幕滚动的默认行为（防止用户移动轮播图的时候屏幕也跟着上下滚动）
 })

4.实现手指离开后图片的轨迹看用户是否移动了图片，flag为true才去判断：

①手指移动距离大于50px图片播放上一张或下一张②手指移动距离小于50px图片回弹；

结束后把flag改为false，并重新开启定时器让它继续自动轮播

 ul.addEventListener('touchend', function(e) {
     if(flag) {     // flag==true（移动图片）时才去判断用户的移动方向和距离
         if(Math.abs(moveX) > 50) {  // 移动距离大于50时 滑向上一张或下一张（moveX可能为正也可能为负，Math.abs()取绝对值）
             if(moveX > 0) {  // 大于0右滑 图片索引减一
                 index--;
             } else {    // 小于0左滑 图片索引加一
                 index++;
             }
             var translatex = -index * w;
             ul.style.transition = 'all .3s';
             ul.style.transform = 'translateX(' + translatex + 'px)';
         } else {    // 小于50px就回弹
             var translatex = -index * w;
             ul.style.transition = 'all .1s';
             ul.style.transform = 'translateX(' + translatex + 'px)';
         }
     }
     // 结束后 把flag重新改为false，并开启定时器让图片开始轮播
     flag = false;
     // 先清除再开启，保证只有一个定时器在运行（不然会有bug）
     clearInterval(timer);
     timer = setInterval(function() {
         index++;
         var translatex = -index * w;
         ul.style.transition = 'all .4s';
         ul.style.transform = 'translateX(' + translatex + 'px)';
     }, 2000);
 })

注：功能还可以继续优化，比如动态添加图片，动态添加底部小圆点等。具体实现方法可以参照我上一篇 JavaScript实现动态轮播图效果 。

具体实现代码如下：

HTML代码：

 <div class="focus">
     <ul>
         <!-- 用户可能一开始往上一张滑，所以要多添加一个focus3 -->
         <li><img src="data:images/focus3.jpg" alt=""></li>
         <li><img src="data:images/focus1.jpg" alt=""></li>
         <li><img src="data:images/focus2.jpg" alt=""></li>
         <li><img src="data:images/focus3.jpg" alt=""></li>
         <li><img src="data:images/focus1.jpg" alt=""></li>
     </ul>
     <ol>
         <li class="current"></li>
         <li></li>
         <li></li>
     </ol>
 </div>

CSS代码：

 * {
     margin:;
     padding:;
 }
 body {
     margin: 0 auto;
     max-width: 540px;
     min-width: 320px;
     background: #f6f6f6;
 }
 .focus {
     width: 100%;
     position: relative;
     margin-top: 50px;
     overflow: hidden;
 }
 .focus ul {
     width: 500%;
     overflow: hidden;
     margin-left: -100%;
 }
 .focus ul li {
     float: left;
     width: 20%;
 }
 .focus ul img {
     width: 100%;
 }
 .focus ol {
     position: absolute;
     bottom: 5px;
     right: 5px;

 }
 .focus ol li {
     width: 5px;
     height: 5px;
     display: inline-block;
     background-color: #fff;
     border-radius: 4px;
     transition: all .2s;
 }
 .focus .current {
     width: 15px;
 }

JavaScript代码：

 window.addEventListener('load', function() {
     var focus = document.querySelector('.focus');
     var ul = focus.children[0];   // 获取focus的第一个孩子，也就是ul
     var ol = focus.children[1];
     var w = focus.offsetWidth;    // 获取focus的宽度
     var index = 0;    // 用来记录图片索引
     var timer = setInterval(function() {    // 添加定时器，两秒调用一次
         index++;   // 每调用一次（轮播一次），图片索引号+1
         var translatex = -index * w;    // ul要移动的距离
         ul.style.transition = 'all .4s';   // 添加过渡属性（css3里的属性）
         ul.style.transform = 'translateX(' + translatex + 'px)';
     }, 2000);
     // 给ul绑定监听函数（每次轮播移动的都是整个ul）  过渡结束（transitionend）时执行
     ul.addEventListener('transitionend', function() {
         if(index >= 3) {    // 索引 > 3说明已经轮播到最后一张了
             index = 0;
             // 去掉过渡效果 快速回到第一张
             ul.style.transition = '';
             var translatex = -index * w;
             ul.style.transform = 'translateX(' + translatex + 'px)';
         } else if(index < 0) {    // 索引 < 0说明用户一开始是往前滑的
             index = 2;
             ul.style.transition = '';
             var translatex = -index * w;
             ul.style.transform = 'translateX(' + translatex + 'px)';
         }
         // 让底部小圆点跟着一起动
         // 将带有current类的li去掉该类
         ol.querySelector('.current').classList.remove('current');
         // 给当前li添加current类
         ol.children[index].classList.add('current');
     })
     // 手指滑动轮播图
     var startX = 0;    // 用来存储手指初始位置
     var moveX = 0;     // 用来存储手指在屏幕上移动的距离
     var flag = false;    // 记录用户是否在图上移动了手指
     // 给ul绑定手指触摸事件
     ul.addEventListener('touchstart', function(e) {
         startX = e.targetTouches[0].pageX;  // 手指的初始触摸位置（左右轮播，只记录x就可以了）
         clearInterval(timer);    // 当手指触摸屏幕时清除定时器（不让它自动轮播了）
     })
     // 给ul绑定手指移动事件
     ul.addEventListener('touchmove', function(e) {
         moveX = e.targetTouches[0].pageX - startX;   // 手指移动的距离
         var translatex = -index * w + moveX;
         ul.style.transition = 'none';
         ul.style.transform = 'translateX(' + translatex + 'px)';
         flag = true;    // 手指移动了，将flag改为true
         e.preventDefault();   // 阻止屏幕滚动的默认行为
     })
     // 给ul绑定手指离开事件
     ul.addEventListener('touchend', function(e) {
         if(flag) {     // flag==true（移动图片）时才去判断用户的移动方向和距离
             if(Math.abs(moveX) > 50) {  // 移动距离大于50时 滑向上一张或下一张（moveX可能为正也可能为负，Math.abs()取绝对值）
                 if(moveX > 0) {  // 大于0右滑 图片索引减一
                     index--;
                 } else {    // 小于0左滑 图片索引加一
                     index++;
                 }
                 var translatex = -index * w;
                 ul.style.transition = 'all .3s';
                 ul.style.transform = 'translateX(' + translatex + 'px)';
             } else {    // 小于50px就回弹
                 var translatex = -index * w;
                 ul.style.transition = 'all .1s';
                 ul.style.transform = 'translateX(' + translatex + 'px)';
             }
         }
         // 结束后 把flag重新改为false，并开启定时器让图片开始轮播
         flag = false;
         // 先清除再开启，保证只有一个定时器在运行（不然会有bug）
         clearInterval(timer);
         timer = setInterval(function() {
             index++;
             var translatex = -index * w;
             ul.style.transition = 'all .4s';
             ul.style.transform = 'translateX(' + translatex + 'px)';
         }, 2000);
     })
 })