如何在单个网页中添加两个轮播图？附单个轮播图代码

The issue with your original code is that it uses a single global slideIndex variable and targets only one class (mySlides1). If you tried to add a second slideshow with the same structure, both would sync up and show the same slide at the same time—since they’re sharing that single index state.

To fix this, we need to encapsulate each slideshow’s state so they run independently. Here’s a clean, scalable approach:

Step 1: Update Your HTML #

Add two separate slideshow sets, each with a unique class for their slides (e.g., mySlides1 and mySlides2):

<!-- First Slideshow -->
<div class="slideshow-container">
  <div class="mySlides1 fade">
    <img src="slide1-1.jpg" style="width:100%">
  </div>
  <div class="mySlides1 fade">
    <img src="slide1-2.jpg" style="width:100%">
  </div>
  <div class="mySlides1 fade">
    <img src="slide1-3.jpg" style="width:100%">
  </div>
</div>

<!-- Second Slideshow -->
<div class="slideshow-container">
  <div class="mySlides2 fade">
    <img src="slide2-1.jpg" style="width:100%">
  </div>
  <div class="mySlides2 fade">
    <img src="slide2-2.jpg" style="width:100%">
  </div>
  <div class="mySlides2 fade">
    <img src="slide2-3.jpg" style="width:100%">
  </div>
</div>

Step 2: Refactor the JavaScript #

We’ll create a reusable function to initialize each slideshow, using closures to keep their state (like slideIndex) private and independent:

// Initialize both slideshows with their own classes and intervals
initSlideshow('mySlides1', 3000); // Changes every 3 seconds
initSlideshow('mySlides2', 5000); // Changes every 5 seconds (different interval optional)

function initSlideshow(slideClass, interval) {
  let slideIndex = 0;
  const slides = document.getElementsByClassName(slideClass);

  function showSlides() {
    // Hide all slides in this set
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    // Increment index (loop back to 1 when we reach the end)
    slideIndex++;
    if (slideIndex > slides.length) { slideIndex = 1; }

    // Show the current slide
    slides[slideIndex - 1].style.display = "block";

    // Schedule the next slide change
    setTimeout(showSlides, interval);
  }

  // Start the slideshow immediately
  showSlides();
}

// Updated navigation function (if you use manual slide selection)
function currentSlide(slideClass, slideNumber) {
  const slides = document.getElementsByClassName(slideClass);
  
  // Hide all slides
  for (let i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  // Show the selected slide
  slides[slideNumber - 1].style.display = "block";

  // Optional: Reset the auto-play timer (track the timeout ID for this)
  // clearTimeout(timeoutId);
  // timeoutId = setTimeout(showSlides, interval);
}

Step 3: Add CSS for Fade Animation (Optional) #

Make transitions smoother with a fade effect:

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides1, .mySlides2 {
  display: none;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: 0.4} 
  to {opacity: 1}
}

Key Improvements: #

• Independent State: Each slideshow has its own slideIndex and slides collection, so they don’t interfere with each other.
• Scalability: Add as many slideshows as you want by calling initSlideshow with a new class name.
• Flexibility: You can set different intervals for each slideshow (like 3s vs 5s in the example).

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