Question

我需要多个幻灯片，但所有幻灯片都在同一页面的不同标签中。

老实说，我不是专家，但我想了解如何在每个按钮都运行的情况下重复幻灯片。

如果我将此完整脚本添加到页面顶部的所有“ .mySlides” CSS类的HTML中，它将在一个页面中显示所有幻灯片，并且它们都可以正常工作，但是我需要将它们分开。

<script>
var slideIndex = [1,1,1,1,1,1,1,1];
var slideId = ["mySlides1", "mySlides2", "mySlides3", "mySlides4",  
"mySlides5", "mySlides6", "mySlides7", "mySlides8"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
showSlides(1, 3);
showSlides(1, 4);
showSlides(1, 5);
showSlides(1, 6);
showSlides(1, 7);

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

所以我复制了幻灯片显示的HTML并相应地更改了ID。

在每个窗口中，我都将“ .mySlides”类添加到页面顶部的CSS中，并且仅添加我在该窗口中使用的类。

.mySlides3 {display: none}

而不是全部离开：

.mySlides1, .mySlides2, .mySlides3, .mySlides4, .mySlides5, .mySlides6,  
.mySlides7, .mySlides8 {display: none}

在每个幻灯片中，我还根据我正在使用的幻灯片更改“ prev”“ next”类的值。

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

这是一个单独的幻灯片的脚本，但是当我在另一个窗口中重复该脚本时，它会显示具有不同图像的不同幻灯片，但所有箭头均无效。

我一直在擦除slideIndex，slideId和showSlides值，只保留我正在使用的幻灯片之前的值，对于“ mySlides3”，我将其保留为：

<script>
var slideIndex = [1,1,1];
var slideId = ["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";  
}
</script>

Answer 1

After search a lot in many pages, i found the solution here! Great! Thanks to Stackoverflow and all the people how contribute to make this a great bank of answers.

如何在同一页面的不同选项卡中进行多个幻灯片显示

1 个答案: