当前位置：首页 > JavaScript

js实现左右滑动

2026-04-03 22:47:28JavaScript

js实现左右滑动

实现左右滑动的 JavaScript 方法

使用 Touch 事件监听

const slider = document.querySelector('.slider');
let startX, moveX, isDragging = false;

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

slider.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  moveX = e.touches[0].clientX - startX;
  slider.style.transform = `translateX(${moveX}px)`;
});

slider.addEventListener('touchend', () => {
  isDragging = false;
  // 添加滑动结束后的逻辑，如复位或切换页面
});

使用鼠标事件实现桌面端兼容

slider.addEventListener('mousedown', (e) => {
  startX = e.clientX;
  isDragging = true;
});

slider.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  moveX = e.clientX - startX;
  slider.style.transform = `translateX(${moveX}px)`;
});

slider.addEventListener('mouseup', () => {
  isDragging = false;
});

slider.addEventListener('mouseleave', () => {
  isDragging = false;
});

添加 CSS 过渡效果

.slider {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

实现惯性滑动

slider.addEventListener('touchend', () => {
  isDragging = false;
  const velocity = moveX / 10; // 简单速度计算
  const threshold = 50; // 滑动阈值

  if (Math.abs(moveX) > threshold) {
    const direction = moveX > 0 ? 1 : -1;
    // 执行滑动动画
  }
});

完整示例代码

<div class="slider-container">
  <div class="slider">
    <!-- 滑动内容 -->
  </div>
</div>

<style>
.slider-container {
  overflow: hidden;
  position: relative;
}
.slider {
  display: flex;
  transition: transform 0.3s ease-out;
}
</style>

<script>
// 整合上述JavaScript代码
</script>

这些方法提供了从基础到进阶的滑动实现方案，可根据具体需求调整参数和交互细节。

js实现左右滑动