相册效果js

<div class="gallery">
  <img src="image1.jpg" alt="Image 1" class="active">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>
<button onclick="prevImage()">Prev</button>
<button onclick="nextImage()">Next</button>

.gallery img {
  display: none;
  width: 100%;
  height: auto;
}
.gallery img.active {
  display: block;
}

function showImage(n) {
  var images = document.querySelectorAll('.gallery img');
  images.forEach(function(img) {
    img.classList.remove('active');
  });
  images[n].classList.add('active');
}

function nextImage() {
  var images = document.querySelectorAll('.gallery img');
  var current = Array.from(images).findIndex(img => img.classList.contains('active'));
  var next = (current + 1) % images.length;
  showImage(next);
}

function prevImage() {
  var images = document.querySelectorAll('.gallery img');
  var current = Array.from(images).findIndex(img => img.classList.contains('active'));
  var prev = (current - 1 + images.length) % images.length;
  showImage(prev);
}