2021-04-15移动端轮播图

移动端

移动端轮播图

css

<style>
      .box {
        margin: 0 auto;
        position: relative;
        box-sizing: border-box;
        width: 750px;
        height: 150px;
        overflow: hidden;
      }

      .box img {
        width: 100%;
      }

      .box ul {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 500%;
        margin-left: -100%;
        list-style: none;
      }

      .box ul li {
        float: left;
        width: 20%;
      }

      .box ol {
        position: absolute;
        bottom: 5px;
        right: 5px;
        margin: 0;
      }

      .box ol li {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: red;
        list-style: none;
        border-radius: 8px;
        transition: all 0.3s;
      }

      .box ol li.current {
        width: 40px;
      }
    </style>```

html结构

  <div class="box">
      <ul>
        <li><img src="./focus3.jpg" alt="" /></li>
        <li><img src="./focus1.jpg" alt="" /></li>
        <li><img src="./focus2.jpg" alt="" /></li>
        <li><img src="./focus3.jpg" alt="" /></li>
        <li><img src="./focus1.jpg" alt="" /></li>
      </ul>
      <ol>
        <li class="current"></li>
        <li></li>
        <li></li>
      </ol>
    </div>

js逻辑

<script>
      var box = document.querySelector(".box");
      var ul = box.querySelector("ul");
      var ol = box.querySelector("ol");
      var w = box.offsetWidth;
      var index = 0;
      var flag = false;
      var timer = setInterval(function () {
        index++;
        ul.style.transition = "all .3s"; // 过渡
        yidong();
      }, 1000);
      // 等着我们过渡完成之后，再去判断 监听过渡完成的事件 transitionend
      ul.addEventListener("transitionend", function () {
        if (index >= 3) {
          index = 0;
          // 去掉过渡效果 这样让我们的ul 快速的跳到目标位置
          ul.style.transition = "none";
          yidong();
        } else if (index < 0) {
          index = 2;
          ul.style.transition = "none";
          yidong();
        }
        //小圆点变化
        var lis = ol.querySelectorAll("li");
        for (var i = 0; i < lis.length; i++) {
          lis[i].className = "";
        }
        ol.children[index].className = "current";

        // // 选出ol的li里面带current的类 remove 移除
        // ol.querySelector("li.current").classList.remove("current");
        // ol.children[index].classList.add("current"); //当前li添加current
      });

      //   手指触摸事件
      var startX = 0;
      var moveX = 0;
      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)`; //ul 移动距离
        flag = true; //手指移动过就为true
        e.preventDefault()//取消默认行为
      });
      //   手指离开事件

      ul.addEventListener("touchend", function (e) {
        if (flag) {
          // 手指移动过就为true 就执行以下代码 否则不执行
          if (Math.abs(moveX) > 50) {
            // Math.abs 取绝对值
            //    向右滑就是播放上一张
            if (moveX > 0) {
              index--;
            } else {
              //    向左滑就是播放下一张
              index++;
            }
            ul.style.transition = "all .3s";
            yidong();
          } else {
            // 如果小于50 我们就回弹
            yidong();
            ul.style.transition = "all .3s";
          }
          // 手指离开的时候从新开启定时器
          clearInterval(timer);
          timer = setInterval(function () {
            index++;
            ul.style.transition = "all .3s"; // 过渡
            yidong();
          }, 1000);
        }
      });

      function yidong() {
        var translatex = -index * w;
        ul.style.transform = `translateX(${translatex}px)`; //ul 移动距离
      }
    </script>```