Javascript 多个幻灯片不起作用（html、css、js）

我应该有4个不同的滑块，每个滑块上有3个不同的图片。我使用W3school的slideshow（）来获得前两张图片（效果很好！），但当我尝试再添加两张图片时，图片无法显示

JS:

---

showSlides（1,0） 编辑：

解决方案1:正确的方法是向“slideIndex”实际添加2个值：

var slideIndex = [1, 1, 1, 1];

而不是：

var slideIndex = [1, 1];

就这样。这解决了最后一行使用新幻灯片超出索引的问题

解决方案2:如果您计划经常更改幻灯片的数量并使其自动化，则可以在页面加载时使用附加的initiaaliseSlides（）函数填充每个索引幻灯片的数组。

var slideIndex = []; // This will be automatically populated
var slideId = ["grantoppen-slide", "granbo-slide", "granstua-slide", "granhaug-slide"];
initialiseSlides();
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2); // Note that this is set to 1 now
showSlides(1, 3);

// Initalise all starting slide indexes
function initialiseSlides(){
   for (var i = 0; i < slideId.length; i++){
      slideIndex[i] = 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"; 
}

var slideIndex=[]；//这将自动填充
var slideId=[“格兰托彭幻灯片”、“格兰博幻灯片”、“格兰斯图幻灯片”、“格兰豪格幻灯片”]；
初始值（）；
放映幻灯片（1,0）；
放映幻灯片（1,1）；
放映幻灯片（1，2）；//请注意，现在将其设置为1
放映幻灯片（1、3）；
//初始化所有起始幻灯片索引
函数initialiseSlides（）{
对于（变量i=0；ix.length）{slideIndex[no]=1}
如果（n<1）{slideIndex[no]=x.length}
对于（i=0；i

解决方案3:或showSlides（）可以像这样进行修正，而无需使用initialiseSlides（）。注意第四行：

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (typeof slideIndex[no] === 'undefined') {slideIndex[no] = 1;}
  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"; 
}

功能演示幻灯片（n，否）{
var i；
var x=document.getElementsByClassName（slideId[no]）；
如果（slideIndex[no]=='undefined'）{slideIndex[no]=1；}
如果（n>x.length）{slideIndex[no]=1}
如果（n<1）{slideIndex[no]=x.length}
对于（i=0；i
除了slideId数组之外，您的javascript还可以。在本例中，您只给出了一个滑块，即
granstua滑块
，这是唯一需要的滑块。但是，当您询问多个滑块时，我复制了您的代码以制作第二个滑块，但指定了第二个类名，
granstua img
，并将其添加到数组中

plusSlides（-1，0）（前后移动）应该与初始代码中的保持一致，因此您不需要调整它们-这就是导航出现问题的地方

希望这有帮助


var slideIndex=[1,1]；
var Slided=[“granstua幻灯片”，“granstua img”]；
放映幻灯片（1,0）；
放映幻灯片（1,1）；
放映幻灯片（1、2）；
放映幻灯片（1、3）；
函数加滑块（n，否）{
放映幻灯片（幻灯片索引[no]+=n，no）；
}
功能演示幻灯片（n，否）{
var i；
var bildeSlide=document.getElementsByClassName（slideId[no]）；
如果（n>bildeSlide.length）{slideIndex[no]=1}
如果（n<1）{slideIndex[no]=x.length}
对于（i=0；i

*{框大小：边框框}
.grantstua幻灯片{显示：无}；
img{垂直对齐：中间；}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*悬停时，添加灰色背景色*/
.prev:悬停，.next:悬停{
背景色：#f1f1；
颜色：黑色；
}
Granstua

❮
❯
幻灯片放映2

❮
❯

这很有效，而且非常简单！你能解释一下为什么会这样吗？他们的JS似乎有逆向逻辑。JS

x[slideIndex[no]-1]的最后一行

超出索引范围，这是问题所在。如果（n<1）{slideIndex[no]=x.length}显示所有图片且不超出索引范围，则使用零，幻灯片数量设置为与该

之前的另一行正确索引。它只改变了开始位置，这是他们JS中的一个bug，可以在不重写函数的情况下绕过它。实际上，为所有幻灯片设置零也会起作用，它只会将开始幻灯片更改为最后一张。@AadneHaaland，我站在更正位置。我们错过了一条正确的道路。请查看答案编辑中的微小更改。幻灯片索引跟踪多张幻灯片的当前幻灯片，其值未初始化，并使其超出索引。@AadneHaaland，用适用于整个JS的正确解决方案更新了答案。它需要为每个幻灯片启动幻灯片编号，在您的情况下，没有添加幻灯片编号，这就是slideIndex超出索引的原因。通过将其设置为零，它将被分配。
var slideIndex = []; // This will be automatically populated
var slideId = ["grantoppen-slide", "granbo-slide", "granstua-slide", "granhaug-slide"];
initialiseSlides();
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2); // Note that this is set to 1 now
showSlides(1, 3);

// Initalise all starting slide indexes
function initialiseSlides(){
   for (var i = 0; i < slideId.length; i++){
      slideIndex[i] = 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"; 
}

function showSlides(n, no) {
  var i;
  var x = document.getElementsByClassName(slideId[no]);
  if (typeof slideIndex[no] === 'undefined') {slideIndex[no] = 1;}
  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"; 
}