JS 移动端轮播图案例

  body {
             margin:;
         }
         .hearder {
             width: 100%;
             height: 150px;
             position: relative;
         }
         ul {
             list-style: none;
             padding:;
             width: 500%;
             height: 100%;
             overflow: hidden;
             margin-left: -200%;
         }
         ul>li {
             width: 20%;
             height: 100%;
             display: inline-block;
         }
         ul>li {
             float: left;
         }
         ul>li>img {
             width: 100%;
             height: 100%;
         }
         ol{
             position: absolute;
             bottom: 5px;
             right: 5px;
             list-style: none;
             padding:;
             margin:;
             z-index:;
         }
         ol>li{
             display:inline-block;
             width: 5px;
             height: 5px;
             background-color: pink;
             border-radius: 2px;
             transform: all .3s;
         }
         .current{
             width: 10px;
         }

 <div class="hearder">
         <ol>
             <li class="current"></li>
             <li></li>
             <li></li>
         </ol>
             <ul>
                 <li>
                     <img src="../imges/lbt.jpg" alt="">
                 </li>
                 <li>
                     <img src="../imges/lbt2.jpg" alt="">
                 </li>
                 <li>
                     <img src="../imges/lbt3.jpg" alt="">
                 </li>
             </ul>
     </div>

 window.addEventListener('load', function () {
     var header = document.querySelector('.hearder')
     var ul = header.children[1];
     var ol = header.children[0]
     var w = header.offsetWidth;

     var index = 0;
     var timer = setInterval(function () {
         index++;
         var transform = index * w;
         ul.style.transition = 'all .3s'
         ul.style.transform = 'translateX(' + transform + 'px)'
     }, 2000)

     ul.addEventListener('transitionend', function () {
         if (index >= 3) {
             index = 0;
             ul.style.transition = 'none'
             var translateX = -index * w;
             ul.style.transform = 'translateX(' + translateX + 'px)'
         } else if (index < 0) {
             index = 2;
             ul.style.transition = 'none'
             var translateX = -index * w;
             ul.style.transform = 'translateX(' + translateX + 'px)'
         }
         // 小圆点跟随图片变化
         ol.querySelector('.current').classList.remove('current')
         ol.children[index].classList.add('current')
     })

     // 手指滑动轮播图
     // 触摸元素touchstart  获取手指初始坐标
     var startX = 0;
     var moveX = 0;  //因为后面会使用这个移动距离所以要定义一个全局变量
     var flag = false
     ul.addEventListener('touchstart', function (e) {
         startX = e.targetTouches[0].pageX;
         clearInterval(timer)
     })
     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;    //如果用户手指移动过我们再去判断是否不做判断效果
         e.preventDefault();  //阻止滚动屏幕的行为

     })

     // 手指离开 根据移动的距离判断是回弹上一张函数下一张
     ul.addEventListener('touchend', function (e) {
         if (flag) {
             if (Math.abs(moveX) > 50) {
                 // 如果是右滑就播放上一张  moveX是正值
                 // 如果是左滑就播放下一张 moveX是负值
                 if (moveX > 0) {
                     index--;
                 } else {
                     index++;
                 }
                 var translateX = -index * w;
                 ul.style.transition = 'all .3s'
                 ul.style.transform = 'translateX(' + translateX + 'px)'
             } else {
                 var translateX = -index * w;
                 ul.style.transition = 'all .1s'
                 ul.style.transform = 'translateX(' + translateX + 'px)'
             }
         }
         // 手指离开就重新开启定时器
         clearInterval(timer)
         var timer = setInterval(function () {
             index++;
             var transform = index * w;
             ul.style.transition = 'all .3s'
             ul.style.transform = 'translateX(' + transform + 'px)'
         }, 2000)

     })
 })