多个幻灯片放映不起作用（html、css、js）

Question

我应该有 4 个不同的滑块，每个滑块上有 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

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

这是来自 W3School 的：

<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"; 
}

Answer 2

嗯，你的 javascript 没问题，除了 slideId 数组。由于您在此示例中只提供了一个滑块，即 granstua-slide，那将是唯一需要的滑块。但是，当您询问多个滑块时，我复制了您的代码以制作第二个滑块，但分配了第二个 class 名称 granstua-img，并将其添加到数组中。

plusSlides (-1, 0)（向后和向前移动）应与初始代码中的相同，因此您无需调整这些 - 这就是导航出错的地方

希望这对您有所帮助

var slideIndex = [1, 1];
var slideId = ["granstua-slide", "granstua-img"];

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] = x.length}
  for (i = 0; i < bildeSlide.length; i++) {
     bildeSlide[i].style.display = "none";  
  }
  bildeSlide[slideIndex[no]-1].style.display = "block";  
}

* {box-sizing: border-box}
.grantstua-slide {display: none};
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover, .next:hover {
  background-color: #f1f1f1;
  color: black;
}

<p id="hyttenavn-slideshow"><i id="granstua-tekst">Granstua</i></p>
<div class="slideshow-container">
  <div class="granstua-slide">
    <img src="http://lorempixel.com/600/400/fashion" style="width:100%">
  </div>

  <div class="granstua-slide">
    <img src="http://lorempixel.com/600/400/cats" style="width:100%">
  </div>

  <div class="granstua-slide">
    <img src="http://lorempixel.com/600/400/food" style="width:100%">
  </div>
  

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

<p id="hyttenavn-slideshow"><i id="granstua-tekst">Slidehow 2</i></p>
<div class="slideshow-container">
  <div class="granstua-img">
    <img src="http://lorempixel.com/600/400/food" style="width:100%">
  </div>

  <div class="granstua-img">
    <img src="http://lorempixel.com/600/400/fashion" style="width:100%">
  </div>

  
   <div class="granstua-img">
    <img src="http://lorempixel.com/600/400/cats" style="width:100%">
  </div>

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

多个幻灯片放映不起作用（html、css、js）

Multiple slideshows not working (html, css, js)

html

javascript

css

slideshow