滑动门js

<div class="slider">
  <div class="slide" id="slide1">Slide 1</div>
  <div class="slide" id="slide2">Slide 2</div>
  <div class="slide" id="slide3">Slide 3</div>
</div>
<button onclick="prevSlide()">Previous</button>
<button onclick="nextSlide()">Next</button>

.slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 200px;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

#slide1 { background-color: red; }
#slide2 { background-color: green; }
#slide3 { background-color: blue; }

let currentSlide = 1;
const totalSlides = 3;

function showSlide(n) {
  const slides = document.querySelectorAll('.slide');
  slides.forEach(slide => slide.style.display = 'none');
  document.getElementById(`slide${n}`).style.display = 'block';
}

function nextSlide() {
  currentSlide = (currentSlide % totalSlides) + 1;
  showSlide(currentSlide);
}

function prevSlide() {
  currentSlide = (currentSlide - 2 + totalSlides) % totalSlides + 1;
  showSlide(currentSlide);
}

// Initialize the first slide
showSlide(currentSlide);