js实现左右滑动效果代码

<div class="slider-container">
  <div class="slider-wrapper">
    <img src="image1.jpg" alt="Image 1" class="slide">
    <img src="image2.jpg" alt="Image 2" class="slide">
    <img src="image3.jpg" alt="Image 3" class="slide">
    <!-- 更多图片... -->
  </div>
</div>

.slider-container {
  width: 100%;
  overflow: hidden; /* 隐藏溢出的部分 */
}

.slider-wrapper {
  display: flex;
  transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.slide {
  min-width: 100%; /* 确保每张图片都能完整显示 */
}

const sliderWrapper = document.querySelector('.slider-wrapper');
let isDown = false;
let startX;
let scrollLeft;

// 监听鼠标按下事件
sliderWrapper.addEventListener('mousedown', (e) => {
  isDown = true;
  sliderWrapper.classList.add('active');
  startX = e.pageX - sliderWrapper.offsetLeft;
  scrollLeft = sliderWrapper.scrollLeft;
});

// 监听鼠标移动事件
sliderWrapper.addEventListener('mouseleave', () => {
  isDown = false;
  sliderWrapper.classList.remove('active');
});

sliderWrapper.addEventListener('mouseup', () => {
  isDown = false;
  sliderWrapper.classList.remove('active');
});

sliderWrapper.addEventListener('mousemove', (e) => {
  if(!isDown) return;
  e.preventDefault();
  const x = e.pageX - sliderWrapper.offsetLeft;
  const walk = (x - startX) * 3; // 调整滑动速度
  sliderWrapper.scrollLeft = scrollLeft - walk;
});

// 如果需要支持触摸设备，可以添加以下事件监听
sliderWrapper.addEventListener('touchstart', (e) => {
  isDown = true;
  startX = e.touches[0].pageX - sliderWrapper.offsetLeft;
  scrollLeft = sliderWrapper.scrollLeft;
});

sliderWrapper.addEventListener('touchend', () => {
  isDown = false;
});

sliderWrapper.addEventListener('touchmove', (e) => {
  if(!isDown) return;
  const x = e.touches[0].pageX - sliderWrapper.offsetLeft;
  const walk = (x - startX) * 3; // 调整滑动速度
  sliderWrapper.scrollLeft = scrollLeft - walk;
});