JavaScript可变超时轮播图：实现部分幻灯片变速播放

Great question! This is a super common tweak for carousels, and it’s totally doable with a small addition to your existing code. Here’s how to make individual slides have their own display durations:

Step 1: Add Custom Timings to Your Slide HTML #

First, we’ll use HTML data attributes to store unique durations for slides that need a different speed. Just add a data-duration attribute (values in milliseconds) to any slide that shouldn’t use the default 2-second delay. Slides without this attribute will stick to your original 2000ms timing:

<div class="mySlides" data-duration="5000">Slide 1 (shows for 5 seconds)</div>
<div class="mySlides">Slide 2 (default 2 seconds)</div>
<div class="mySlides" data-duration="3000">Slide 3 (shows for 3 seconds)</div>

Step 2: Update Your JavaScript to Use Dynamic Delays #

Modify your showSlides function to read the custom duration from the active slide, falling back to the default if no custom value exists:

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  
  // Hide all slides first
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  
  slideIndex++;
  if (slideIndex > slides.length) { slideIndex = 1 }
  
  // Grab the currently active slide
  var currentSlide = slides[slideIndex - 1];
  currentSlide.style.display = "block";
  
  // Get custom duration or use default 2000ms
  var slideDuration = parseInt(currentSlide.getAttribute('data-duration')) || 2000;
  
  // Set timeout with the dynamic duration
  setTimeout(showSlides, slideDuration);
}

Quick Breakdown #

• The data-duration attribute keeps your per-slide timings clean and tied directly to the slide element.
• parseInt converts the attribute value to a number, and the || 2000 ensures we fall back to the default if the attribute is missing or invalid.
• This change preserves your original carousel logic while adding the flexibility you need.

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