手写兼容PC/M一体的滑拖拽动drag，banner切换

html:

<div class="love-car obox">
      <div id="seemycar">
        <span class="tit pos">
          我的爱车
          <!-- <i class="yc-icon-common yc-i-rzyl-i"></i> -->
        </span>
        <span id="goseemycar">
          <i class="yc-icon-common yc-i-see-more"></i>
        </span>
      </div>
      <div class="hideBox" id="ppt">
        <div class="car-move clear abs" id="ppt-contents">
          <div class="move-box">
            <p class="tit">
              飞度
            </p>
            <div class="car-info">
              <div class="box">
                <div class="lef">
                  <p>2015款 1.2THP 自动豪华版 自动豪华版</p>
                  <div class="tag clear">
                    <span>京A.98765</span>
                    <span class="authenticate">去认证</span>
                  </div>
                </div>
                <div class="rig h-image mar15">
                  <img src="" onerror="onerror=null, src='@CDN/centerM/images/default-img.jpg'">
                </div>
              </div>
            </div>
          </div>
          <div class="move-box hide">
            <p class="tit">
              飞度
            </p>
            <div class="car-info">
              <div class="box">
                <div class="lef">
                  <p>2015款 1.2THP 自动豪华版 自动豪华版</p>
                  <div class="tag clear">
                    <span>京A.98765</span>
                    <span>认证中</span>
                  </div>
                </div>
                <div class="rig h-image mar15">
                  <img src="" onerror="onerror=null, src='@CDN/centerM/images/default-img.jpg'">
                </div>
              </div>
            </div>
          </div>
          <div class="move-box hide">
            <div class="add-car" id="addcar">
              <div class="add">
                <div class="yc-icon-common yc-i-add-i"></div>
                <p>添加爱车</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="info-btn">
        <span></span>
        <span class="cur"></span>
        <span></span>
      </div>
    </div>

css:未做抽离

.owner {
  background-color: #f8f8f8;
  width: 100%;
  padding: 0;
  .hide{
    display: none;
  }
  .obox{
    width: 100%;
    margin: 8px auto;
    padding: 12px 20px;
    background-color: #fff;
  }
  .hideBox{
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: all 0.001s ease;
  }
  .abs{
    position: absolute;
    z-index: 1;
  }
  .hiddenBox{
    width: 100%;
    overflow: hidden;
    position: relative;
    &::after {
        content: '';
        display: block;
        height: 0;
        // padding-bottom: 27%;
        clear: both;
    }
  }
  .w100 {
    width: auto !important;
    position: absolute;
    overflow-x: auto;
  }
  .pad0 {
    padding-bottom: 0;
  }
  .mar15 {
    margin: 15px 0;
  }
  // .h-image {
  //   width: 100%;
  //   overflow: hidden;
  //   position: relative;
  //   img {
  //       height: 100%;
  //       width: 100%;
  //       min-width: 100%;
  //       min-height: 100%;
  //       position: absolute;
  //       left: 50%;
  //       top: 50%;
  //       -webkit-transform: translate(-50%,-50%);
  //       transform: translate(-50%,-50%);
  //       border-right: 2PX solid #fff;  /*no*/
  //       display: block;
  //       border: 0;
  //   }
  //   img:nth-child(3){
  //       margin: 5px 0;
  //   }
  //   &::before {
  //     content: "";
  //     padding-top: 60.666%;
  //     display: block;
  //   }
  //   &::after {
  //       content: '';
  //       display: block;
  //       height: 0;
  //       clear: both;
  //   }
  // }
  .clear {
    &::after {
      content: '';
      display: block;
      height: 0;
      clear: both;
    }
  }
  .header {
    margin: 0 auto;
    .top{
      .photo {
        position: relative;
        float: left;
        img{
          width: 55px;
          height: 55px;
          border-radius: 50%;
          background-color: #f7f7f7;
          overflow: hidden;
        }
        .v-icon{
          position: absolute;
          left: 35px;
          bottom: 0;
        }
      }
      .name {
        width: auto;
        height: 55px;
        float: left;
        margin-left: 15px;
        .t {
          line-height: 25px;
          color: #222;
          font-size: 18px;
        }
        .tag {
          height: 20px;
          line-height: 20px;
          background-color: #feedeb;
          border-radius: 10px;
          font-size: 10px;
          padding: 0 6px;
          color: #FE4B3B;
          text-align: center;
          margin-top: 5px;
        }
      }
      .set-icon, .msg-icon{
        width: 25px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 25px;
        float: right;
        span {
          display: block;
        }
      }
      .set-icon {
        margin-left: 0px;
      }
    }
    .follow-fans {
      width: 100%;
      line-height: 40px;
      font-size: 12px;
      color: #bbb;
      .r15 {
        margin-right: 15px;
      }
      .cor22 {
        color: #222;
        margin-left: 8px;
      }
    }
    .special-column {
      width: 100%;
      height: 64px;
      .box {
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        div {
          margin: 6px auto 0;
        }
        .tit {
          width: 100%;
          font-size: 12px;
          color: #646464;
          text-align: center;
          margin-top: 5px;
        }
      }
    }
  }
  .love-car {
    height: auto;
      #seemycar{
        height: 54px;
        line-height: 54px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .tit {
          display: inline-block;
          height: 28px;
          line-height: 28px;
          color: #222;
          font-size: 20px;
        }
        #goseemycar{
          width: 50px;
          height: 100%;
          text-align: right;
        }
      }
      .add-car {
        width: 99.9%;
        height: auto;
        border: 1PX dashed #e2e2e2; /*px*/
        border-radius: 20px;
        margin-top: 12px;
        font-size: 14px;
        color: #222;
        text-align: center;
        .add {
          width: 80px;
          height: auto;
          margin: 17px auto;
          padding-bottom: 4px;
          text-align: center;
          p {
            line-height: 14px;
            margin-top: 8px;
          }
        }
      }
      #ppt{
        .tit{
          font-size: 18px;
        }
      }
  }
  .cygj {
    height: 137px;
    p.tit {
      height: 28px;
      line-height: 28px;
      color: #222;
      font-size: 20px;
    }
    .column {
      margin: 12px auto;
      .module {
        width: 25%;
        height: 73px;
        float: left;
        text-align: center;
      }
    }
  }
  .f-car {
    .tit {
      position: relative;
      height: 22px;
      line-height: 22px;
      color: #222;
      font-size: 20px;
      .arrow{
        position: absolute;
        width: 7px !important;
        height: 7px !important;
        display: block;
        border-top: 1PX solid #888; /*no*/
        border-right: 1PX solid #888; /*no*/
        transform: rotate(45deg);
        right: 2px !important;
        left: auto !important;
        top: 8px !important;
      }
    }
    .car-list{
      display: -webkit-box;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      padding: 20px 0 15px;
      .module{
        position: relative;
        width: 122px;
        height: 158px;
        font-size: 12px;
        text-align: center;
        margin: 0 10px 0 0;
        padding: 10px;
        border: 1px solid #EEEEEE;
        border-radius: 6px;
        box-shadow: 0 0 12px 6px rgba(34,34,34,0.04);
        overflow: hidden;
        .h-image {
          width: 90px;
          height: 60px;
          margin:0 auto 5px;
          i {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
            display: block;
          }
          .d-price {
            position: absolute;
            top: 0;
            left: 0;
            height: 16px;
            line-height: 16px;
            padding: 0 2px 5px;
            font-size: 10px;
            color: #FFFFFF;
            background: #18BE6A;
            border-radius: 6px 0 6px 0;
            .d-num{
              display: inline-block;
              vertical-align: middle;
              line-height: 14px;
            }
          }
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .car-name {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          color: #222222;
          text-align: center;
        }
        .car-price {
          font-size: 14px;
          color: #FF4B3B;
          margin: 0 -10px;
        }
        .ask-btn {
          width: 74px;
          height: 25px;
          line-height: 25px;
          border-radius: 15px;
          text-align: center;
          background-color: #feedeb;
          color: #FF4B3B;
          margin: 5px auto;
        }
      }
    }
  }

  #logout {
    height: 100%;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    color: #222;
    text-align: center;
    background-color: #f8f8f8;
    border-radius: 22px;
    border: 1px solid #f1f1f1;
    margin: 8px auto 0;
  }
  .bot {
    padding-bottom: 3px;
  }
  .pos {
    width: 85px;
    display: inline-block;
    position: relative;
    i {
      position: absolute;
      right: -45px;
      top: 2px;
    }
  }
  .car-info {
    width: 100%;
    height: auto;
    .box {
      width: 100%;
      height: auto;
      margin: 8px auto 0;
      display: flex;
      justify-content: space-between;
      .lef {
        position: relative;
        margin-right: 20px;
        p {
          height: auto;
          max-height: 44px;
          font-size: 14px;
          line-height: 20px;
          color: #222;
        }
        .tag {
          position: absolute;
          left: 0;
          bottom: 0;
          span {
            display: block;
            height: 26px;
            line-height: 26px;
            font-size: 10px;
            color: #fff;
            font-weight: 200;
            border-radius: 4px;
            background-color: #3377FF;
            margin-right: 8px;
            text-align: center;
            float: left;
          }
          span:nth-child(1){
            width: 72px;
          }
          span:nth-child(2){
            width: 58px;
            color: #222;
            background-color: #F8F8F8;
          }
        }
      }
      .rig.h-image {
        width: 140px;
        margin: 5px 0 0;
      }
    }
  }
  .info-btn {
    width: 100%;
    height: 15px;
    margin: 5px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    span{
      width: 6px;
      height: 4px;
      border-radius: 3px;
      background-color: #CCC;
      display: block;
      margin: 0 4px;
    }
    .cur {
      width: 12px;
      background-color: #222;
    }
  }
  .car-move {
    overflow: hidden;
    .move-box {
      float: left;
    }
  }
}

js：

const dragHandler = {
  pptItem: null,
  itemW: 0,
  oBoxW: 0,
  x: 0,
  moveX: 0,
  changex: 0,
  lef: 0,
  rig: 0,
  touch: null,
  curIndex: 0,
  init() {
    let len = 0;
    dragHandler.pptItem = $('#ppt-contents .move-box');
    len = dragHandler.pptItem.length,
      dragHandler.itemW = $('#ppt').width() * 1;
    dragHandler.x = 0;
    dragHandler.moveX = 0;
    dragHandler.changex = 0;  // 外层盒子的x轴初始pos
    dragHandler.lef = 0;
    dragHandler.rig = 0;
    dragHandler.touch;
    dragHandler.curIndex = 0;
    dragHandler.pptItem.width(dragHandler.itemW);
    console.log(dragHandler.itemW, len)
    dragHandler.oBoxW = dragHandler.itemW * len;
    $('#ppt').height(Number(dragHandler.pptItem.height()) + 25);
    $('#ppt-contents').width(dragHandler.oBoxW);
    $('#ppt-contents .move-box').removeClass('hide');
    $('.info-btn span').eq(dragHandler.curIndex).addClass('cur').siblings('span').removeClass('cur');

    if (len > 1) {
      document.getElementById('ppt').addEventListener("mousedown", dragHandler.dragStart, false);
      document.getElementById('ppt').addEventListener("mouseup", dragHandler.dragEnd, false);
      document.getElementById('ppt').addEventListener("touchstart", dragHandler.dragStart)
      document.getElementById('ppt').addEventListener("touchend", dragHandler.dragEnd)
    }
  },
  dragStart(event) {
    event.preventDefault();
    dragHandler.touch = event;
    event && event.touches ? dragHandler.touch = event.touches[0] : dragHandler.touch;
    //获取鼠标按下时的x方向位置
    dragHandler.x = dragHandler.touch.clientX;
    // console.log( touch.clientX ,11111122222);
    event && event.touches ? document.getElementById('ppt').addEventListener("touchmove", dragHandler.dragMove) :
      document.getElementById('ppt').addEventListener("mousemove", dragHandler.dragMove, false);
  },
  dragMove(event) {
    dragHandler.touch = event
    if (event.touches) {
      dragHandler.touch = event.touches[0];
    }
    dragHandler.moveX = dragHandler.touch.clientX;
    dragHandler.changex = dragHandler.moveX - dragHandler.x;
    dragHandler.lef = parseInt($('#ppt-contents').css('left')).toFixed(2);
    // console.log(dragHandler.moveX, dragHandler.changex, 22222);
    $('#ppt-contents').css({ 'left': dragHandler.lef + dragHandler.changex });
  },
  dragEnd(e) {
    $(this).unbind('touchmove', null).unbind('mousemove', null);
    dragHandler.lef = parseInt($('#ppt-contents').css('left')).toFixed(2);
    dragHandler.rig = parseInt($('#ppt-contents').css('right')).toFixed(2);
    console.log('结束时的索引', dragHandler.curIndex);
    if (dragHandler.changex > 0 && dragHandler.lef < 0) { // 动作向右，且不是第一个
      dragHandler.curIndex++;
      $('#ppt-contents').animate({ 'left': dragHandler.itemW * dragHandler.curIndex }, 100, "linear");
    } else if (dragHandler.changex < 0 && dragHandler.rig != 0) { // 动作向左，且不是最后一个
      dragHandler.curIndex--;
      $('#ppt-contents').animate({ 'left': dragHandler.itemW * dragHandler.curIndex }, 100, "linear");
    };
    $('.info-btn span').eq(Math.abs(dragHandler.curIndex)).addClass('cur').siblings('span').removeClass('cur');
  }
};
window.onready = () => {
      dragHandler.init();
      // 窗口大小处可优化，窗口大小拖动时做一个节流，节流防抖函数的添加及原理可参考：https://blog.csdn.net/weixin_42498482/article/details/105814064
      $(window).resize(function () {   
        dragHandler.init();
      });
}

顺便提下普及下防抖和节流的场景，连续触发并实时的可采用节流，连续触发并不需要实时的可采用防抖。
如果有用记得点赞或关注哦！

根据数据动态渲染banner切换，点击切换，自动轮播，拖拽切换等功能的PC/M端兼容性封装插件，支持手指滑动事件，点击事件,请访问：
https://blog.csdn.net/weixin_42498482/article/details/110492785