Javascript 如何在同一页上显示两个幻灯片？

我以这张幻灯片为例，效果非常好。每个幻灯片之间都有共享的类，这意味着当一个幻灯片完成后，下一个幻灯片才能开始，我需要它们能够独立工作，并且需要更改类

这里只有一个幻灯片

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

*{框大小：边框框}
正文{字体系列：Verdana，无衬线；边距：0}
/*幻灯片容器*/
.slideshow容器{
位置：相对位置；
背景：#f1f1；
}
/*幻灯片*/
迈斯利德斯先生{
显示：无；
填充：80px；
文本对齐：居中；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-30px；
填充：16px；
颜色：#888；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
位置：绝对位置；
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
颜色：白色；
}
/*点/子弹/指示器容器*/
.dot容器{
文本对齐：居中；
填充：20px；
背景：ddd；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
/*向活动点/圆添加背景色*/
.active，.dot:悬停{
背景色：#717171；
}
/*将斜体字体样式添加到所有引号中*/
q{字体样式：斜体；}
/*为作者添加蓝色*/
.作者{颜色：矢车菊蓝；}

我更爱你，因为我相信你喜欢我是为了我自己，而不是别的
-约翰·济慈
但人不是注定要失败的。一个人可以被毁灭，但不能被打败。
-欧内斯特·海明威
我没有失败。我刚刚找到了一万种行不通的方法。
-托马斯·A·爱迪生
❮
❯

我不知道我是否应该这样做。。。但这里是面向对象的做事风格

为所有幻灯片创建一个类

创建每张幻灯片的实例

调用所需实例的函数。。 我在html中编辑的内容是对实例（或对象）的onclick调用，我将幻灯片和点都包装在一个节div中

现在，您有两个独立工作的幻灯片部分（幻灯片+点）

let slide1=new CreateSlide（0）；
让slide2=新建的CreateSlide（1）；
函数CreateSlide（索引）{
this.slideContainer=document.getElementsByClassName（“section”）[index]；
此.slideIndex=1；
this.plusSlides=函数（n）{
this.showSlides（this.slideIndex+=n）；
};
this.currentSlide=函数（n）{
this.showSlides（this.slideIndex=n）；
};
this.showshiels=函数（n）{
var i；
var slides=this.slideContainer.getElementsByClassName（“mySlides”）；
var dots=this.slideContainer.getElementsByClassName（“点”）；
如果（n>幻灯片长度）{
this.slideIndex=1
}
if（n<1）{
this.slideIndex=slides.length
}
对于（i=0；i

*{
框大小：边框框
}
身体{
字体系列：Verdana，无衬线；
保证金：0
}
/*幻灯片容器*/
.slideshow容器{
位置：相对位置；
背景：#f1f1；
}
/*幻灯片*/
迈斯利德斯先生{
显示：无；
填充：80px；
文本对齐：居中；
}
/*下一步和上一步按钮*/
.prev，.next{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
利润上限：-30px；
填充：16px；
颜色：#888；
字体大小：粗体；
字体大小：20px；
边界半径：0 3px 3px 0；
用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
位置：绝对位置；
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
颜色：白色；
}
/*点/子弹/指示器容器*/
.dot容器{
文本对齐：居中；
填充：20px；
背景：ddd；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
/*向活动点/圆添加背景色*/
.active，.dot:悬停{
背景色：#717171；
}
/*将斜体字体样式添加到所有