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

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

这是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（）时为每个索引幻灯片填充数组。 strong>功能：

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：或可以不使用initialiseSlides（）来固定showSlides（）来纠正自身。注意第四行：

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，因此这是唯一需要的滑块。但是，当您询问多个滑块时，我复制了代码以制作第二个滑块，但分配了第二个类名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）

2 个答案: