w3schools 多幻灯片教程 - 附加幻灯片

Question

这是包含多个元素的页面的 JS。每个触发它自己的模态幻灯片。适用于两个，但当我尝试添加第三个时，它失败了。逻辑上的第一步是：var slideID = ["mySlides1", "mySlides2", "mySlides3"。同样在 CSS 中添加 .mySlides3。但它必须有更多。也许如果我对这些行的作用有一个解释：显示幻灯片（1、0）； showSlides(1, 1);

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple

用于两个幻灯片的原始代码(w3Schools.com)

var slideIndex = [1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides1", "mySlides2"] 
showSlides(1, 0);
showSlides(1, 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"; 
}

Answer 1

更改您的 slideIndex 和 slideId 以包含第三张幻灯片的成员。然后为第三组调用showSlides。

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

当然，这假设您已经复制了其中一个幻灯片 HTML 并相应地更改了 ID。

此外，不要忘记将 .mySlides3 class 添加到页面顶部的 CSS。

.mySlides1, .mySlides2, .mySlides3 {display: none}

w3schools 多幻灯片教程 - 附加幻灯片

w3schools multiple slideshow tutorial - additional slideshows

javascript

slideshow