如何在 w3 代码中添加超过 2 个幻灯片？

Question

我使用 w3 代码在一页中插入多个幻灯片 (https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_two)

我尝试添加第三张幻灯片，但根本不起作用。我在函数 (showSlides) 中遗漏了一些东西，非常感谢你的帮助。

代码如下：

html:

<p>Slideshow 1:</p>
<div class="slideshow-container">
  <div class="mySlides1">
    <img src="./assets/man001.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man002.jpg" style="width:100%">
  </div>

  <div class="mySlides1">
    <img src="./assets/man003.jpg" style="width:100%">
  </div>

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

<p>Slideshow 2:</p>
<div class="slideshow-container">
  <div class="mySlides2">
    <img src="./assets/man004.jpg" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/2.png" style="width:100%">
  </div>

  <div class="mySlides2">
    <img src="./assets/man006.jpg" style="width:100%">
  </div>

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

<p>Slideshow 3:</p>
<div class="slideshow-container">
  <div class="mySlides3">
    <img src="./assets/j1.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j2.jpg" style="width:100%">
  </div>

  <div class="mySlides3">
    <img src="./assets/j3.jpg" style="width:100%">
  </div>

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

这里是 js:

var slideIndex = [1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);


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

我是初学者，所以我为此苦苦挣扎。非常感谢您的帮助！

Answer 1

我已经很久没有使用 w3.js，但是在那个代码中，当您创建 div class="mySlides1" 并在其中添加图像，尝试将 classes 添加到图像本身并删除 div，另外 - 添加容器 div 就像在示例代码中一样

此外，要检查您是否没有遗漏任何内容，请复制确切的代码并查看是否有效，复制有效的代码并粘贴它们，将 class 从 mySlides2 更改为 mySlides3

第三：这就是我为让它工作所做的：我在 slideIndex 中添加了第三个 [1]，因为有 3 张幻灯片：

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);

Answer 2

您需要将另一个项目添加到 slideIndex 数组，将另一个项目添加到 slideId 数组并调用另一个 showDivs(1, 2);在您的 HTML 中，您必须对第三组按钮使用 onclick="plusDivs(-1, 2)" 和 onclick="plusDivs(1, 2)" 。我认为这非常低效。

var slideIndex = [1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3"]
showDivs(1, 0);
showDivs(1, 1);
showDivs(1, 2);

function plusDivs(n, no) {
  showDivs(slideIndex[no] += n, no);
}

function showDivs(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";  
}

<h2 class="w3-center">Manual Slideshow</h2>

<div class="w3-content w3-display-container">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides1" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 0)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 0)">&#10095;</button>
</div>

<div class="w3-content w3-display-container">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_la.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_ny.jpg" style="width:100%">
  <img class="mySlides2" src="https://www.w3schools.com/w3css/img_chicago.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 1)">&#10095;</button>
</div>


<div class="w3-content w3-display-container">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides3" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1, 2)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1, 2)">&#10095;</button>
</div>

但更好的方法是：

请阅读JavaScript

中的评论

var slideIndex;


// the array of all containers
let containers = Array.from(document.querySelectorAll(".w3-display-container"));

// for each conteiner
containers.forEach(c =>{
  // get the array of images in this container
  let images = Array.from(c.querySelectorAll(".mySlides"));
  //the left button for this container
  let left = c.querySelector(".w3-display-left");
  //the right button for this container
  let right = c.querySelector(".w3-display-right");
  
  slideIndex = 0;//set the first slide
  plusDivs(0,images);
  
  
  // events for the this left and right buttons
  left.addEventListener("click", ()=>{plusDivs(-1,images)})
  right.addEventListener("click", ()=>{plusDivs(1,images)})
})


function showDivs(x) {                    
  if (slideIndex > x.length-1) {slideIndex = 0}    
  if (slideIndex < 0) {slideIndex = x.length-1}
  
  //All the slides are display="none"
  for (let i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  // the current slide is display = "block";
  x[slideIndex].style.display = "block";  

}

function plusDivs(n,x) { 
  // increment the value for the slideIndex and show the slide
  slideIndex += n;
  showDivs(x);
}

<h2>Manual Slideshow</h2>

<div class="w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <button class="w3-display-left" >&#10094;</button>
  <button class="w3-display-right" >&#10095;</button>
</div>

<div class="w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_la.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_ny.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_chicago.jpg" style="width:100%">
  <button class="w3-display-left">&#10094;</button>
  <button class="w3-display-right">&#10095;</button>
</div>


<div class="w3-content w3-display-container">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_mountains.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_forest.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_snowtops.jpg" style="width:100%">
  <img class="mySlides" src="https://www.w3schools.com/w3css/img_lights.jpg" style="width:100%">
  
  <button class="w3-display-left">&#10094;</button>
  <button class="w3-display-right">&#10095;</button>
</div>

如何在 w3 代码中添加超过 2 个幻灯片？

how to add more than 2 slideshows in w3 code?

javascript

slideshow