Question

这是具有多个元素的页面的JS。每个触发它自己的模态幻灯片。适用于两个，但是当我尝试添加第三个时，它失败。逻辑上的第一步是：var slideID = [“ mySlides1”，“ mySlides2”，“ mySlides3]。同样，在CSS中添加.mySlides3。但是必须有更多的东西。也许如果我对这些行在做什么有一个解释： showSlides（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。

此外，不要忘记在页面顶部的CSS中添加.mySlides3类。

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

w3schools多幻灯片演示教程-其他幻灯片

1 个答案: