HTML/Javascript文本幻灯片，其中包含无限数量的组件

我试图为我的网站制作一个文本幻灯片。我使用了以下代码，可以制作一个包含3组文本的幻灯片

问题是：要显示3组文本，我需要在html文件中显示三组

。 如果我有一个包含100个单词的文本列表（如[cat、dog、chair、tree等]），我如何更改代码来管理它而不必编写100组

谢谢

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

/*幻灯片放映容器*/
.slideshow容器{
位置：相对位置；
背景：#f1f1；
}
/*幻灯片*/
迈斯利德斯先生{
显示：无；
填充：200px；
文本对齐：居中；
}
/*下一步和上一步按钮*/
.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{字体样式：斜体；}
/*给单词加上蓝色*/
.myText{color:cornflowerblue；}

猫

狗

主席
❮
❯

这个答案创建了一个单词数组

然后循环遍历它，生成DIV和p，并将其附加到幻灯片容器中

words=[“猫”、“狗”、“老鼠”、“蛇”、“树”]；
容器=document.querySelector（“.slideshow容器”）；
words.forEach（函数（word）{
div=document.createElement（“div”）；
div.classList.add（“mySlides”）；
p=document.createElement（“p”）；
p、 添加（“myText”）；
p、 innerHTML=word；
儿童部（p）
container.appendChild（div）
});
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

/*幻灯片放映容器*/
.slideshow容器{
位置：相对位置；
背景：#f1f1；
}
/*幻灯片*/
迈斯利德斯先生{
显示：无；
填充：200px；
文本对齐：居中；
}
/*下一步和上一步按钮*/
.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{字体样式：斜体；}
/*给单词加上蓝色*/
.myText{color:cornflowerblue；}

❮
❯

因此，在数组上循环并创建元素？非常感谢。这正是我需要的！