javascript - 多个幻灯片不工作(html、css、js)

Question

我应该有 4 个不同的 slider ，每个 slider 上有 3 个不同的图片。我使用 W3school 的幻灯片 ( https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple ) 来获取前两个(工作正常!)但是当我尝试再添加 2 个时，图片不会显示。

JS:

showSlides(1, 0);  <-- this was from W3
showSlides(1, 1);  <-- this was from W3
showSlides(1, 2);  <-- I added this
showSlides(1, 3);  <-- I added this

有人知道如何解决这个问题吗？

这是来自 W3Schools 的:

<div class="slideshow-container">
  <div class="grantoppen-slide">
    <img src="bilder/grantoppen01.jpg" style="width:100%">
  </div>

  <div class="grantoppen-slide">
    <img src="bilder/grantoppen02.jpg" style="width:100%">
  </div>

  <div class="grantoppen-slide">
    <img src="bilder/grantoppen03.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 0)">&#10095;</a>
</div>

这是我的:

var slideIndex = [1, 1];
var slideId = ["grantoppen-slide", "granbo-slide", "granstua-slide", "granhaug-slide"];
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var bildeSlide = document.getElementsByClassName(slideId[no]);
  if (n > bildeSlide.length) {
    slideIndex[no] = 1
  }
  if (n < 1) {
    slideIndex[no] = bildeSlide.length
  }
  for (i = 0; i < bildeSlide.length; i++) {
    bildeSlide[i].style.display = "none";
  }
  bildeSlide[slideIndex[no] - 1].style.display = "block";
}

<p id="hyttenavn-slideshow"><i id="granstua-tekst">Granstua</i></p>
<div class="slideshow-container">
  <div class="granstua-slide">
    <img src="bilder/granstua01.jpg" style="width:100%">
  </div>

  <div class="granstua-slide">
    <img src="bilder/granstua02.jpg" style="width:100%">
  </div>

  <div class="granstua-slide">
    <img src="bilder/granstua03.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1, 2)">&#10094;</a>
  <a class="next" onclick="plusSlides(1, 2)">&#10095;</a>
</div>

Answer 1

编辑:

解决方案 1:正确的方法是实际将 2 个值添加到“slideIndex”:

var slideIndex = [1, 1, 1, 1];

代替:

var slideIndex = [1, 1];

就是这样。这解决了新幻灯片最后一行超出索引的问题。

解决方案 2:如果您计划经常更改幻灯片的数量并使其自动化，您可以在页面加载时使用额外的 initiaaliseSlides()功能:

var slideIndex = []; // This will be automatically populated
var slideId = ["grantoppen-slide", "granbo-slide", "granstua-slide", "granhaug-slide"];
initialiseSlides();
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2); // Note that this is set to 1 now
showSlides(1, 3);

// Initalise all starting slide indexes
function initialiseSlides(){
   for (var i = 0; i < slideId.length; i++){
      slideIndex[i] = 1;
   }
}

function plusSlides(n, no) {
  showSlides(slideIndex[no] += n, no);
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block"; 
}

解决方案 3: 或者可以像这样修复 showSlides() 以更正自身，而不使用 initialiseSlides()。注意第四行:

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (typeof slideIndex[no] === 'undefined') {slideIndex[no] = 1;}
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block"; 
}