Saya memiliki 4 tayangan slide gambar, dan saya mengalami masalah dengan Javascript. Saya telah memberikan div nama id dan class. Kelas imageContainer digunakan dalam CSS. Oleh karena itu saya menggunakan id untuk Javascript, tetapi tidak akan berfungsi. Saya dapat melakukan ini dengan satu tayangan slide gambar, tetapi saya harus memiliki beberapa tayangan slide di halaman yang sama.

Kode HTML di bawah ini bukan kode saya yang sebenarnya, itu hanya kode placeholder yang saya tulis untuk menunjukkan apa yang ingin saya capai. Kode Javascript, bagaimanapun, adalah kode saya yang sebenarnya.

Saya menghargai bantuannya.

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
Cool_Gamer 18 April 2020, 01:29

1 menjawab

Jawaban Terbaik

ID harus unik, jadi, cara terbaik untuk melakukannya adalah mendapatkan semua galeri dengan nama kelasnya dan mulai mendapatkan gambar dari sana. Perhatikan bahwa slides sekarang menjadi array dua dimensi untuk menampung galeri dan gambar, seperti:

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

Saya telah menambahkan indeks untuk galeri dan gambar ke setiap gambar menggunakan properti dataset, jadi, Anda hanya perlu tahu gambar mana yang diklik alih-alih mencoba mendapatkannya dari currentslide. Juga, numslides disediakan dari panjang galeri.

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>
1
Triby 17 April 2020, 23:48