单页面部署多个Slideshow Gallery的技术解决方案咨询

Ah, the classic global state conflict issue—totally makes sense why your multiple galleries are fighting each other. The original W3Schools code uses a single global slideIndex variable and targets all elements with classes like mySlides across the entire page. So when you click next on one gallery, it updates the state for every gallery on the page.

Let's fix this by encapsulating each gallery's behavior so they operate independently. Here's a step-by-step solution:

Step 1: Update Your HTML Structure #

First, wrap each entire gallery in a container (we'll use class="slideshow-container"). This lets us target elements only within that specific gallery instead of globally. We'll also pass this to our click handlers so we know which gallery triggered the action.

<!-- Gallery 1 -->
<div class="slideshow-container">
  <!-- Full-width images -->
  <div class="mySlides">
    <img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%">
  </div>

  <!-- Navigation Buttons -->
  <a class="prev" onclick="plusSlides(-1, this)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, this)">&#10095;</a>

  <!-- Thumbnails -->
  <div class="row">
    <div class="column">
      <img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(1, this)">
    </div>
    <div class="column">
      <img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(2, this)">
    </div>
    <div class="column">
      <img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(3, this)">
    </div>
    <div class="column">
      <img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(4, this)">
    </div>
    <div class="column">
      <img class="demo cursor" src="assets/img/kollektion/Shabes HQ-1.jpg" style="width:100%" onclick="currentSlide(5, this)">
    </div>
    <div class="column">
      <img class="demo cursor" src="assets/img/kollektion/Shabes HQ-4.jpg" style="width:100%" onclick="currentSlide(6, this)">
    </div>
  </div>
</div>

<!-- Gallery 2 (duplicate the container structure for as many galleries as you need) -->
<div class="slideshow-container">
  <!-- Add your second gallery's slides, buttons, and thumbnails here -->
</div>

Step 2: Refactored JavaScript #

We'll ditch the global variables and instead store each gallery's state directly on the container element using a data- attribute. All operations will be scoped to the specific gallery that triggered the action.

// Initialize all galleries when the page loads
document.addEventListener('DOMContentLoaded', function() {
  const allGalleries = document.querySelectorAll('.slideshow-container');
  allGalleries.forEach(gallery => {
    // Set initial slide index for this gallery
    gallery.dataset.slideIndex = 1;
    showSlides(1, gallery);
  });
});

function plusSlides(n, clickedElement) {
  // Find the parent gallery container of the clicked button
  const gallery = clickedElement.closest('.slideshow-container');
  let currentIndex = parseInt(gallery.dataset.slideIndex);
  currentIndex += n;
  showSlides(currentIndex, gallery);
}

function currentSlide(n, clickedElement) {
  const gallery = clickedElement.closest('.slideshow-container');
  showSlides(n, gallery);
}

function showSlides(n, gallery) {
  // Get slides and thumbnails ONLY within the current gallery
  const slides = gallery.querySelectorAll('.mySlides');
  const thumbnails = gallery.querySelectorAll('.demo');
  let slideIndex = n;

  // Wrap around the slide index if we go out of bounds
  if (slideIndex > slides.length) slideIndex = 1;
  if (slideIndex < 1) slideIndex = slides.length;

  // Hide all slides in this gallery
  slides.forEach(slide => slide.style.display = 'none');
  // Remove active class from all thumbnails in this gallery
  thumbnails.forEach(thumb => thumb.classList.remove('active'));

  // Show the current slide and mark its thumbnail as active
  slides[slideIndex - 1].style.display = 'block';
  thumbnails[slideIndex - 1].classList.add('active');

  // Update caption (uncomment and add a .caption element to your gallery if needed)
  // const caption = gallery.querySelector('.caption');
  // if (caption) caption.innerHTML = thumbnails[slideIndex - 1].alt;

  // Save the updated index back to the gallery's dataset
  gallery.dataset.slideIndex = slideIndex;
}

Key Improvements: #

• Scoped Elements: Uses closest('.slideshow-container') to target only elements within the relevant gallery, no more global selector conflicts.
• Per-Gallery State: Each gallery stores its own slideIndex in a data-slide-index attribute, so galleries don't share state.
• Automatic Initialization: All galleries initialize themselves when the page loads, no manual setup needed.
• Modern, Maintainable Code: Uses querySelectorAll, forEach, and classList for cleaner, more robust code.

Optional: Add Caption Support #

If you want to keep the caption feature, add a .caption element inside each gallery container:

<div class="slideshow-container">
  <!-- ... slides and buttons ... -->
  <div class="caption"></div>
  <!-- ... thumbnails ... -->
</div>

Then uncomment the caption-related lines in the showSlides function.

This setup lets you add as many independent slideshow galleries as you want without any conflicts.

内容的提问来源于stack exchange，提问作者mrkuzco