Question

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

我试图添加第三个幻灯片，但是它根本不起作用。我缺少该函数（showSlides）的功能，感谢您的帮助。

代码如下：

html：

 ceil(a/b) = floor(a/b + d)  = floor(a/b + 1 - 1/b) = floor((a + b - 1)/b)

这是js：

int myceil = (a + b - 1)/b;

我是一个初学者，所以我为此非常努力。非常感谢您的帮助！

Answer 1

我已经很长时间没有使用w3.js了，但是在该代码中，当您创建mySlides1并在其中添加图像时，它们具有标记为div class="mySlides1"类的图像，尝试将类添加到图像本身并删除div，也-像示例代码中一样添加容器div

另外，要检查您是否没有丢失任何内容，请复制确切的代码并查看是否有效，然后复制有效的代码并将其粘贴，将类从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个以上的幻灯片？

2 个答案: