Javascript 一个html文件中有多个滑块

我还在学习如何编码，我遇到了一个问题。我正在制作一个网站，我想有多个图像滑块虽然只有第一个工作正常，其他滑块上的图像不会显示。我想我遗漏了一些代码来完成这个，虽然我不知道是什么。我添加的代码是如何创建滑块。我的问题是如何使用这段代码在一个html文件中创建多个滑块，所有这些滑块都可以工作。例如，复制滑块并在同一个文件中粘贴一个新的滑块，该文件具有所有滑块都应该工作的不同图像。非常感谢你的帮助

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

.slideshowContainer{
宽度：43.2米；
高度：23.15em；
边缘顶部：1.5em；
左边距：1.5em；
背景色：#FFF；
箱形阴影：-0.05em 0em 0.5em 0.05em rgba（0,0,0,0.4）；
-网络工具包盒阴影：-0.05em 0em 0.5em 0.05em rgba（0,0,0,0.4）；
-莫兹盒阴影：-0.05em 0em 0.5em 0.05em rgba（0,0,0,0.4）；
}
迈斯利德斯先生{
显示：无；
}
a、 对{
光标：指针；
填充：15px；
浮动：对；
颜色：#FFF；
利润上限：-268px；
z指数：1；
位置：相对位置；
边界半径：3px 0 3px；
}
a、 左{
光标：指针；
填充：15px；
浮动：左；
颜色：#FFF；
利润上限：-268px；
z指数：1；
位置：相对位置；
边界半径：0 3px 3px 0；
}
a、 右：悬停，a。左：悬停{
背景色：rgba（0,0,0,0.8）；
}
多特先生{
光标：指针；
高度：12px；
宽度：12px；
边缘底部：5px；
背景色：#BBB；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
多斯切特先生{
文本对齐：居中；
}
.active，.dot:悬停{
背景色：#717171；
}
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：0.8s；
动画名称：淡入淡出；
动画持续时间：0.8s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：0.6；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0.6；
}
到{
不透明度：1；
}
}

❮
❯

由于有这样的行，复制代码是行不通的

var slides = document.getElementsByClassName("mySlides");

这将影响所有滑块，因为所有滑块都有类为

mySlides

的元素

---

更改所有代码（html、css、js）中的所有类名和ID应该可以工作。但是首先理解代码当然更好，这样可以更有效地重用代码。

您指的是哪个ID？你的意思是我需要用不同的名字写相同的代码，例如3次？dots类也一样吗？我是说它会起作用，但大部分都是多余的。