当前位置：首页 > JavaScript

JS如何实现左右滑动

2026-04-04 11:20:28JavaScript

实现左右滑动的JavaScript方法

使用Touch事件监听

通过监听touchstart、touchmove和touchend事件实现触摸滑动效果：

JS如何实现左右滑动

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

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

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

slider.addEventListener('touchend', () => {
  if (moveX > 50) {
    // 向右滑动逻辑
  } else if (moveX < -50) {
    // 向左滑动逻辑
  }
  slider.style.transform = 'translateX(0)';
});

使用CSS Scroll Snap

结合CSS的scroll-snap-type属性和JavaScript控制滚动行为：

JS如何实现左右滑动

.slider-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
}
.slide {
  scroll-snap-align: start;
}

const container = document.querySelector('.slider-container');
let currentIndex = 0;

function goToSlide(index) {
  container.scrollTo({
    left: index * container.offsetWidth,
    behavior: 'smooth'
  });
}

使用第三方库（如Swiper）

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>
</div>

<script>
  new Swiper('.swiper', {
    loop: true,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
</script>

鼠标拖动实现

通过鼠标事件模拟触摸滑动效果：

let isDragging = false;
let startX, scrollLeft;

slider.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.pageX - slider.offsetLeft;
  scrollLeft = slider.scrollLeft;
});

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

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

slider.addEventListener('mousemove', (e) => {
  if(!isDragging) return;
  e.preventDefault();
  const x = e.pageX - slider.offsetLeft;
  const walk = (x - startX) * 2;
  slider.scrollLeft = scrollLeft - walk;
});