JS如何实现左右滑动

实现左右滑动的方法

使用 touchstart、touchmove 和 touchend 事件监听触摸操作，计算滑动距离和方向。

let startX, moveX;

element.addEventListener('touchstart', (e) => {
  startX = e.touches[0].clientX;
});

element.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diffX = moveX - startX;

  if (Math.abs(diffX) > 10) {
    e.preventDefault(); // 阻止默认滚动行为
    if (diffX > 0) {
      console.log('向右滑动');
    } else {
      console.log('向左滑动');
    }
  }
});

element.addEventListener('touchend', () => {
  startX = null;
  moveX = null;
});

使用 CSS 过渡动画

结合 CSS 的 transform 和 transition 属性实现平滑滑动效果。

.slider {
  transition: transform 0.3s ease;
}

element.addEventListener('touchmove', (e) => {
  moveX = e.touches[0].clientX;
  const diffX = moveX - startX;
  element.style.transform = `translateX(${diffX}px)`;
});

element.addEventListener('touchend', (e) => {
  const diffX = moveX - startX;
  if (Math.abs(diffX) > 50) {
    // 滑动距离超过阈值，触发完整滑动
    element.style.transform = diffX > 0 ? 'translateX(100%)' : 'translateX(-100%)';
  } else {
    // 回弹到原位
    element.style.transform = 'translateX(0)';
  }
});

使用第三方库

使用 Swiper.js 等成熟库快速实现滑动效果。

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>

const swiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
});

兼容鼠标事件

在支持触摸的设备之外，添加鼠标事件支持。

element.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
});

function onMouseMove(e) {
  moveX = e.clientX;
  const diffX = moveX - startX;
  element.style.transform = `translateX(${diffX}px)`;
}

function onMouseUp() {
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
  // 处理滑动结束逻辑
}

性能优化

使用 requestAnimationFrame 优化滑动动画性能。

function animateSlide(diffX) {
  requestAnimationFrame(() => {
    element.style.transform = `translateX(${diffX}px)`;
  });
}