Слайд-шоу из нескольких изображений Javascript выпуск - PullRequest
Новая
       37

Слайд-шоу из нескольких изображений Javascript выпуск

1 голос
/ 18 апреля 2020

У меня есть 4 слайд-шоу с изображениями, и у меня проблемы с Javascript. Я дал div и id, и 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>

1 Ответ

1 голос
/ 18 апреля 2020

ID должны быть уникальными, поэтому лучший способ сделать это - получить все галереи по имени класса и начать получать изображения оттуда. Обратите внимание, что slides теперь является двумерным массивом для хранения галереи и изображений, например: 

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

Я добавил индексы для галереи и изображения для каждого изображения, используя dataset propperty, поэтому вы только нужно знать, на какое изображение щелкнули вместо того, чтобы пытаться получить от 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>
...