多图像幻灯片 Javascript 问题

Question

我有 4 个图片幻灯片，但 Javascript 有问题。我已经为 div 指定了 id 和 class 名称。 class imageContainer 用于CSS。因此，我将 id 用于 Javascript，但它不起作用。我可以用一张图片幻灯片来做到这一点，但我需要在同一页面上放多张幻灯片。

下面的HTML代码不是我的实际代码，它只是我写的占位符代码以显示我想要实现的目标。但是，Javascript 代码是我的实际代码。

感谢您的帮助。

function openWin(url) {
  aWindow = window.open(url, "Window 1", "width=400, height=400");
}

var numslides = 0,
  currentslide = 0;
var slides = new Array();

function MakeSlideShow() {
  container = document.getElementsById("Gallery");
  for (i = 0; i < imgs.length; i++) {
    if (imgs[i].className != "imga") continue;
    slides[numslides] = imgs[i];

    if (numslides == 0) {
      imgs[i].style.display = "block";
    } else {
      imgs[i].style.display = "none";
    }
    imgs[i].onclick = NextSlide;
    numslides++;
  }
}

function NextSlide() {
  slides[currentslide].style.display = "none";
  currentslide++;
  if (currentslide >= numslides) currentslide = 0;
  slides[currentslide].style.display = "block";
}
window.onload = MakeSlideShow;

<h2>Gallery 1</h2>
<div id="Gallery" class="imageContainer">
  <img class="img" src="https://via.placeholder.com/100" />
  <img class="img" src="https://via.placeholder.com/101" />
  <img class="img" src="https://via.placeholder.com/102" />
  <img class="img" src="https://via.placeholder.com/103" />
</div>

<h2>Gallery 2</h2>
<div id="Gallery" class="imageContainer">
  <img class="img" src="https://via.placeholder.com/106" />
  <img class="img" src="https://via.placeholder.com/107" />
  <img class="img" src="https://via.placeholder.com/108" />
  <img class="img" src="https://via.placeholder.com/109" />
</div>

<h2>Gallery 3</h2>
<div id="Gallery" class="imageContainer">
  <img class="img" src="https://via.placeholder.com/110" />
  <img class="img" src="https://via.placeholder.com/111" />
  <img class="img" src="https://via.placeholder.com/112" />
  <img class="img" src="https://via.placeholder.com/113" />
</div>

<h2>Gallery 4</h2>
<div id="Gallery" class="imageContainer">
  <img class="img" src="https://via.placeholder.com/114" />
  <img class="img" src="https://via.placeholder.com/115" />
  <img class="img" src="https://via.placeholder.com/116" />
  <img class="img" src="https://via.placeholder.com/117" />
</div>

Answer 1

ID 必须是唯一的，因此，最好的方法是通过 class 名称获取所有画廊，然后从那里开始获取图像。请注意，slides 现在是一个二维数组，用于保存图库和图像，例如：

slides[0] = [image100, image101, image102, image103];

我已经使用 dataset 属性为每张图片添加了画廊和图片的索引，因此，您只需要知道点击了哪张图片，而不是试图从 currentslide 获取。此外，numslides 由图库长度提供。

var slides = new Array();
    
function MakeSlideShow() 
{
     var containers = document.getElementsByClassName("imageContainer");
      for(var x = 0; x < containers.length; x++) {
          // Create gallery
          slides[x] = new Array();
          var imgs = containers[x].children;
          for(var i = 0; i < imgs.length; i++) {
              // Add image to current gallery
              slides[x][i] = imgs[i];
              // Set it's display, note that at least 1 images was added
              if(slides[x].length == 1) {
                  imgs[i].style.display = 'block';
              } else {
                  imgs[i].style.display = 'none';
              }
              // Add gallery and image info
              imgs[i].dataset.gallery = x;
              imgs[i].dataset.img = i;
              // Add onclick event, but we need to send current image
              imgs[i].onclick = function() {
                  nextSlide(this);
              }
          }
      }
}

// This function needs to know wich img was clicked
function nextSlide(pic)
{
    // Get gallery and image from dataset to know what to do
    var gallery = pic.dataset.gallery;
    var img = pic.dataset.img;
    // Hide current image
    slides[gallery][img].style.display = 'none';
    // Search for next
    img ++;
    // No more images availabel, go to first
    if(img == slides[gallery].length) {
        img = 0;
    }
    // Show next image
    slides[gallery][img].style.display = 'block';
}
window.onload = MakeSlideShow;

          <h2>Gallery 1</h2>    
          <div id="Gallery1" class="imageContainer"> 
           <img class="img" src="https://via.placeholder.com/100" />
           <img class="img" src="https://via.placeholder.com/101" />
           <img class="img" src="https://via.placeholder.com/102" />
           <img class="img" src="https://via.placeholder.com/103" />
          </div>
    
          <h2>Gallery 2</h2>    
         <div id="Gallery2" class="imageContainer"> 
           <img class="img" src="https://via.placeholder.com/106" />
           <img class="img" src="https://via.placeholder.com/107" />
           <img class="img" src="https://via.placeholder.com/108" />
           <img class="img" src="https://via.placeholder.com/109" />
         </div>
    
          <h2>Gallery 3</h2>    
         <div id="Gallery3" class="imageContainer"> 
           <img class="img" src="https://via.placeholder.com/110" />
           <img class="img" src="https://via.placeholder.com/111" />
           <img class="img" src="https://via.placeholder.com/112" />
           <img class="img" src="https://via.placeholder.com/113" />
         </div>
    
          <h2>Gallery 4</h2>    
         <div id="Gallery4" class="imageContainer"> 
           <img class="img" src="https://via.placeholder.com/114" />
           <img class="img" src="https://via.placeholder.com/115" />
           <img class="img" src="https://via.placeholder.com/116" />
           <img class="img" src="https://via.placeholder.com/117" />
         </div>

多图像幻灯片 Javascript 问题

Multiple Image Slideshow Javascript Issue

html

javascript

image

image-gallery

slideshow