pc端和移动端走马灯滑动切换

pc端和移动端走马灯滑动切换

<div class="scroll" id="entrance">
      <el-carousel :interval="4000" type="card"  arrow="always" ref="carousel"  @change="changeFn" indicator-type="text" height="410px" :autoplay="false" indicator-position="none" trigger="mouse">
      <el-carousel-item v-for="(item,index) in arr" :key="index">
       <div class="imgBox" >
         {{ item }}
       </div>
      </el-carousel-item>
    </el-carousel>
  </div>
     data(){
         return{
             isMobile:false,
         }
     }
    mounted() {
        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
        this.isMobile = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent);
        if(this.isMobile){
          this.slideBanner1()
        }else{
          this.entrance = document.querySelector('#entrance')
          console.log(this.entrance,'this.entrance')
        }

  },
   watch: {
    entrance(n) {
        console.log(n,'nnnn')
        // 监听 然后调用切换的方法
        this.slide(n)
    },
  methods:{
  //h5
    slideBanner(){
          console.log('移动端滑动')
          var box = document.querySelector(".el-carousel__container");
          var startPointX = 0;
          var stopPointX = 0;
          var resetPoint = function() {
            startPointX = 0;
            stopPointX = 0;
          };
          box.addEventListener("touchstart", function(e) {
            startPointX = e.changedTouches[0].pageX;
          });
          box.addEventListener("touchmove", function(e) {
            stopPointX = e.changedTouches[0].pageX;
          });
          let that = this;
          box.addEventListener("touchend", function(e) {
            if (stopPointX == 0 || startPointX - stopPointX == 0) {
              resetPoint();
              return;
            }
            if (startPointX - stopPointX > 0) {
              resetPoint();
              that.next();
              return;
            }
            if (startPointX - stopPointX < 0) {
              resetPoint();
              that.prev();
              return;
            }
          })
        },

         // 左右滑动触发的切换
         prev() {
          this.$refs.carousel.prev();
        },
        next() {
          this.$refs.carousel.next();
        },
        //pc端的方法
         slide(i) {
            console.log('这里走了吗， ')
            var flag;
            var downX;
            i.addEventListener("mousedown", function (event) {
                    flag = true;
            // 获取到点击的x下标
                    downX = event.clientX;
            });
            console.log(downX,'downX0-----')
            var that = this;
            i.addEventListener("mousemove", function (event) {
            if (flag) {
                // 判断是否是鼠标按下滚动元素区域
                // 获取移动的x轴
                var moveX = event.clientX;
                // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
                // 我这里就是根据这个值去判断是否切换的
                var scrollX = moveX - downX;
                // 左滑
                if (scrollX < 0) {
                    if (scrollX < -150) {
                    // 调用切换的方法
                        that.next()
                    // 切换完后 取消事件
                        flag = false;
                    }
                }
                if (scrollX > 0) {
                    if (scrollX > 150) {
                        that.prev()
                        flag = false;
                    }
                }
                }
            });
        // 鼠标抬起停止拖动
           i.addEventListener("mouseup", function () {
              console.log('这里走了吗111')
              flag = false;
            });
            // 鼠标离开元素停止拖动
            i.addEventListener("mouseleave", function (event) {
              console.log('这里走了吗222')
              flag = false;
            });
    }