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()">Prev</button>
<button onclick="nextSlide()">Next</button>

.slider {
  width: 600px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#slide1 { background-image: url('image1.jpg'); }
#slide2 { background-image: url('image2.jpg'); }
#slide3 { background-image: url('image3.jpg'); }

let currentSlide = 1;
const totalSlides = 3;

function showSlide(n) {
  const slides = document.querySelectorAll('.slide');
  slides.forEach(slide => slide.style.opacity = 0);
  document.getElementById(`slide${n}`).style.opacity = 1;
}

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

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

// Initialize the first slide
showSlide(currentSlide);