js手机滑动效果

const slider = document.querySelector('.slider');
let startX = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let animationID = 0;
let isDragging = false;

slider.addEventListener('touchstart', touchStart);
slider.addEventListener('touchend', touchEnd);
slider.addEventListener('touchmove', touchMove);

function touchStart(event) {
  startX = event.touches[0].clientX;
  isDragging = true;
  cancelAnimationFrame(animationID);
}

function touchMove(event) {
  if (!isDragging) return;
  const currentX = event.touches[0].clientX;
  const diffX = currentX - startX;
  currentTranslate = prevTranslate + diffX;
  setSliderPosition();
}

function touchEnd() {
  isDragging = false;
  prevTranslate = currentTranslate;
  // 添加惯性滑动效果（可选）
  animationID = requestAnimationFrame(() => {
    // 简单的惯性效果实现
    if (Math.abs(currentTranslate - prevTranslate) > 5) {
      currentTranslate += (currentTranslate > prevTranslate ? -1 : 1);
      setSliderPosition();
      animationID = requestAnimationFrame(arguments.callee);
    }
  });
}

function setSliderPosition() {
  slider.style.transform = `translateX(${currentTranslate}px)`;
}