android-cloud-H5/microserviceUserH5/static/js/vender/move.js

var sliderData = (function(cb){
  document.getElementById('slider').addEventListener('touchstart',touchstart, false);
  document.getElementById('slider').addEventListener('touchmove',touchmove, false);
  document.getElementById('slider').addEventListener('touchend',touchend, false);
  var pageDom = document.getElementsByClassName('page')[0];
  var rightEarDom = document.getElementsByClassName('right-ear')[0];
  var leftEarDom = document.getElementsByClassName('left-ear')[0];
  var scheduleChildLine = document.getElementsByClassName('schedule-child-line')[0];
  
  var width = document.documentElement.clientWidth - 50;
  var startX =0;
  var index = 0;
  var translateX = 0;
  var startTime;
  var newTranslateX;
  var distance = 0;
  var startTranslate;
  var isSlide = false;
  var sliderNumber = 4;//滑块是数量，控制溢出不能滑动
  
  function touchstart(e){
    startX = e.touches[0].clientX;
    startTime = new Date().getTime();
    startTranslate = translateX;
    isSlide = true;
  }
  
  function touchmove(e){
    if (!isSlide) return
    var currentX = e.touches[0].clientX
    //2端溢出不能滑动
    if (startTranslate == 0 && currentX > startX) return;
    if (Math.abs(startTranslate) == width * (sliderNumber - 1) && currentX < startX) return;
  
    // 向右滑动时， 没数据无法滑动
    if (currentX < startX) {
  
    }
    distance = currentX - startX;
    translateX = currentX - startX + startTranslate;
  
    document.getElementById("slider-list").style.transform = "translateX("+translateX+"px)"
  }
  function touchend(){
    if (!isSlide) return
  
    var duration = +new Date() - startTime
    if (translateX > startTranslate) {
      // 向左划
      if (distance > width / 3 || (distance > 40 && duration < 600)) {
        newTranslateX = startTranslate + width;
      } else {
        newTranslateX = startTranslate
      }
      console.log(cb)
    } else {
      // 向右划
      if (Math.abs(distance) > width / 3 || (Math.abs(distance) > 40 && duration < 600)) {
        newTranslateX = startTranslate - width;
      } else {
        newTranslateX = startTranslate
      }
      cb();
    }
  
    translateX = newTranslateX;
    isSlide = false;
    distance = 0;
    index = Math.abs(newTranslateX / width)
  
    document.getElementById("slider-list").style.transform = "translateX("+translateX+"px)"
    lineMove();
  }
  //点击左耳朵
  leftEarDom.addEventListener('click',() => {
    if (index == 0) return;
    startTranslate = translateX;
    newTranslateX = startTranslate + width;
    translateX = newTranslateX;
    document.getElementById("slider-list").style.transform = "translateX("+translateX+"px)"
    lineMove();
  })
	//点击右耳朵
  rightEarDom.addEventListener('click',() => {
    if (index === sliderNumber - 1) return;
    startTranslate = translateX;
    newTranslateX = startTranslate - width;
    translateX = newTranslateX;
    document.getElementById("slider-list").style.transform = "translateX("+translateX+"px)";
    lineMove();
    cb();
  })
  //下方进度条移动
  function lineMove(){
    index = Math.abs(newTranslateX / width);
    let oneSlider = 36/sliderNumber,
        transformSlider = oneSlider*index;
    scheduleChildLine.style.width = `${oneSlider}px`;
    scheduleChildLine.style.transform = `translateX(${transformSlider}px)`;
    pageDom.innerText = `${index + 1}/${sliderNumber}页`
  }
})(getLists)