Javascript 如何在页面中显示多个滑块

我很抱歉问这个问题，如果它被重复，但我是新来这里的网络开发， 我使用了w3schools的代码在同一页面上创建多个滑块

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

 

幻灯片不适用于myslide3到myslide7 因为第一张幻灯片包含箭头

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

❮；
❯

第二个包含

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

❮；
❯

如果我重复一遍，他们是为我的第三至第七个工作

提前感谢您的帮助

我在脚本中找到了解决方案，我为每个额外的mySlider类添加了额外的1

<script>
var slideIndex = [1,1,1,1,1,1,1];
/* Class the members of each slideshow group with different CSS classes */
var slideId = ["mySlides", "mySlides1", "mySlides2","mySlides3", "mySlides4", "mySlides5" , "mySlides6"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1,2);
showSlides(2, 3);
showSlides(3, 4);
showSlides(4,5);  
showSlides(5,6);
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>

var slideIndex=[1,1,1,1,1,1]；
/*使用不同的CSS类对每个幻灯片组的成员进行分类*/
var slided=[“mySlides”、“mySlides1”、“mySlides2”、“mySlides3”、“mySlides4”、“mySlides5”、“mySlides6”]
放映幻灯片（1,0）；
放映幻灯片（1,1）；
放映幻灯片（1,2）；
放映幻灯片（2、3）；
放映幻灯片（3、4）；
放映幻灯片（4,5）；
放映幻灯片（5,6）；
函数加滑块（n，否）{
放映幻灯片（幻灯片索引[no]+=n，no）；
}
功能演示幻灯片（n，否）{
var i；
var x=document.getElementsByClassName（slideId[no]）；
如果（n>x.length）{slideIndex[no]=1}
如果（n<1）{slideIndex[no]=x.length}
对于（i=0；i

对于带有continue scroll的右箭头和左箭头，我添加了相应的类名编号，如myslide2，然后使用了2，对于myslide3，使用了3号以及1号作为下一个

<div class="arrows"><a class="prev" onclick="plusSlides(-2, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a>

❮ ❯

使用此单个脚本，我的所有滑块在单个页面中作为“继续”滑块工作

<div class="arrows"><a class="prev" onclick="plusSlides(-2, 2)">❮</a> <a class="next" onclick="plusSlides(1, 2)">❯</a>