js制作滑动页面

<div class="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
</div>
<button onclick="slideLeft()">Slide Left</button>
<button onclick="slideRight()">Slide Right</button>

.slider {
  display: flex;
  overflow: hidden;
  width: 300px; /* 设置slider的宽度 */
}

.slide {
  min-width: 100%;
  transition: transform 0.5s ease-in-out;
}

let currentPosition = 0;
const slides = document.querySelectorAll('.slide');
const slideWidth = slides[0].clientWidth;

function slideLeft() {
  currentPosition -= slideWidth;
  updateSlider();
}

function slideRight() {
  currentPosition += slideWidth;
  updateSlider();
}

function updateSlider() {
  const offset = -currentPosition;
  slides.forEach(slide => {
    slide.style.transform = `translateX(${offset}px)`;
  });
}

// 自动滑动示例
setInterval(slideRight, 3000); // 每3秒自动向右滑动