移动端滑动轮播

//滑动轮播图封装
    // ObanSon        banner
    // ObanFth        banner外边的父盒子
    // ObanIconSon    banner下边的小圆点
    // ObanIconClass  设置小圆点颜色的类名
  function ObannerBox(ObanSon, ObanFth, ObanIconSon, ObanIconClass) {
    var OtouchEnd,
      OtouchMove,
      OtouchStart,
      Obanindex,
      ObanWidth,
      ObanMove,
      ObanMoveStart,
      Oban_Mslide,
      ObanRightIndex,
      ObanLeftIndex = 0;
    // OtouchEnd      触摸事件结束是的坐标
    // OtouchStart    触摸事件开始时的坐标
    // OtouchMove     触摸事件移动时的坐标
    // Obanindex      当前banner图的下标
    // ObanWidth      当前banner图的宽度
    // ObanMove       当前banner外边父盒子应该所在的位置
    // ObanMoveStart  当前banner左右滑动时移动的距离
    // Oban_Mslide    当前banner外边父盒子的宽度
    //ObanRightIndex  banner右滑时下面小圆点的下标位置
    //ObanLeftIndex  banner左滑时下面小圆点的下标位置
    document.addEventListener("touchstart", function(e) {
      // /^(?:INPUT|TEXTAREA|A)$/.test(e.target.tagName)||e.preventDefault();
    });
    $(ObanSon).each(function(index, item) {
      (function(index) {
        $(item).on("touchstart", function() {
          $(ObanFth).css({
            transition: "all 0s linear 0s"
          });
          Obanindex = index;
          ObanWidth = Math.ceil($(ObanSon).width());
          Oban_Mslide = $(ObanFth).width() - ObanWidth;
          // console.log(Oban_Mslide + "ObanMslide");
          //触摸时banner图左右滑动
          $(ObanFth).on("touchmove", function(e) {
            OtouchMove = e.originalEvent.targetTouches[0].pageX;
            ObanMoveStart = OtouchMove - OtouchStart;
            ObanMove = -(Obanindex * ObanWidth) + ObanMoveStart;
            $(ObanFth).css({
              transform: "translateX(" + ObanMove + "px)"
            });
          });
          //用于获取开始时的触摸坐标
          $(ObanFth).on("touchstart", function(e) {
            OtouchStart = e.originalEvent.targetTouches[0].pageX;
          });

          //触摸事件结束
          $(ObanFth).on("touchend", function(e) {
            //设置滑动效果 时长
            $(ObanFth).css({
              transition: "all .5s linear 0s"
            });
            OtouchEnd = e.originalEvent.changedTouches[0].pageX;
            //判断向右滑动超出33%时banner父盒子的位置
            if (ObanMoveStart < -ObanWidth / 3) {
              // console.log(Obanindex + "sss");
              $(ObanFth).css({
                transform: "translateX(" + -(Obanindex + 1) * ObanWidth + "px)"
              });
              ObanRightIndex = Obanindex + 1;
              $(ObanIconSon)
                .eq(ObanRightIndex)
                .addClass(ObanIconClass)
                .siblings()
                .removeClass(ObanIconClass);
              if (Oban_Mslide < (Obanindex + 1) * ObanWidth) {
                $(ObanFth).css({
                  transform: "translateX(" + -Oban_Mslide + "px)"
                });
              }
              //判断向左滑动超出33%时banner父盒子的位置
            } else if (ObanMoveStart > ObanWidth / 3) {
              $(ObanFth).css({
                transform: "translateX(" + -(Obanindex - 1) * ObanWidth + "px)"
              });
              ObanLeftIndex = Obanindex - 1;
              if (ObanLeftIndex < 0) {
                ObanLeftIndex = 0;
              }
              $(ObanIconSon)
                .eq(ObanLeftIndex)
                .addClass(ObanIconClass)
                .siblings()
                .removeClass(ObanIconClass);
              if (ObanMove > 0) {
                $(ObanFth).css({
                  transform: "translateX(" + 0 + "px)"
                });
              }

              //判断向左或向右滑动不超出33%时banner父盒子的位置
            } else if (
              ObanMoveStart >= -ObanWidth / 3 &&
              ObanMoveStart <= ObanWidth / 3
            ) {
              ObanMoveStart = 0;
              $(ObanFth).css({
                transform: "translateX(" + -(Obanindex * ObanWidth) + "px)"
              });
              // console.log(-(Obanindex * ObanWidth));
            }
          });
        });
      })(index);
    });
  }

<div class="banner">
        <ul class="slides">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol>
            <li class="ban_icon"></li>
            <li></li>
            <li></li>
        </ol>
        <div class="down_sawtooth"></div>
        <ul class="m_slide">
            <li><img src="img/m_banner1.jpg" alt=""></li>
            <li><img src="img/m_banner2.jpg" alt=""></li>
            <li><img src="img/m_banner3.jpg" alt=""></li>
        </ul>
    </div>

 .banner{width: 100%;overflow: hidden;position: relative;}
    .banner ul{width: 300%;}
    .banner ul li img{width: 100%;vertical-align: middle;}
    .banner ul li{float: left;width: 33.3%;}
    .banner ol li{cursor: pointer;width: .075rem;height: .075rem;border-radius: 50%;background: white;margin: 0 .05rem;float: left;}
.banner ol{position:absolute;bottom:.1rem;left: 50%;margin-left: -.3rem;z-index: 997;}
.ban_icon{background: #5eb832 !important;}