Javascript 如何在html中创建多个幻灯片库？

我尝试为我的项目制作一个幻灯片库，然后我发现本教程实际上有效，但仅适用于1个幻灯片库，当我尝试制作第二个幻灯片库时，它没有像我预期的那样工作，它没有使2个幻灯片库成为我的代码只是制作第一个幻灯片库的副本这是我的代码：

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
var captionText=document.getElementById（“caption”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

*{
框大小：边框框；
}
img{
垂直对齐：中间对齐；
}
/*定位图像容器（需要定位左右箭头）*/
.集装箱{
位置：相对位置；
}
/*默认情况下隐藏图像*/
迈斯利德斯先生{
显示：无；
}
/*将光标悬停在缩略图上时添加指针*/
.光标{
光标：指针；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：40%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*图像文本的容器*/
.标题容器{
文本对齐：居中；
背景色：#222；
填充：2x16px；
颜色：白色；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*六列并排*/
.栏目{
浮动：左；
宽度：16.66%；
}
/*为thumnbail图像添加透明度效果*/
.演示{
不透明度：0.6；
}
.主动，
.演示：悬停{
不透明度：1；
}

1/6
2/6
3/6
4/6
5/6
6/6
❮
❯

您不能简单地复制html代码。如果您想用相同的javascript代码控制每个库，您必须将html gallary包装到具有唯一标识符的容器元素中。这里有一个想法：

<div id="gallery01">
<!-- Put your html code for gallery here -->
</div>

<div id="gallery02">
<!-- Put your html code for gallery here -->
</div>

因为不使用jquery，所以需要一个返回容器元素的函数

 getParentContainer(childNode) {
  /* Put your code here */
}

---

您好，您在这里只提供了1个幻灯片的代码。你能把第二张幻灯片的代码放进去吗？

 getParentContainer(childNode) {
  /* Put your code here */
}