Javascript 将项目符号添加到随右侧幻灯片自动更改的滑块

我制作了一个带有七张图片和下一个和上一个按钮的滑块。滑块自动工作，悬停滑块时，循环停止

我尝试添加交互式项目符号（现在用静态HTML编写），以响应给定图片。
项目符号的数量应与幻灯片的数量相同，但无需自己逐个添加。
但我不知道怎么做。有人能帮忙吗

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；i0）{
幻灯片[slideIndex-1].style.display=“block”；
点[slideIndex-1]。类名+=“活动”；
}
}
$（文档）.ready（函数（）{
var interval=setInterval（函数（）{
var$curr=$（'.mySlides:visible'），
$next=（$curr.next（）.length）？$curr.next（）：$（'.mySlides'）.first（）；
$next.css（'z-index'，2）.fadeIn（'slow'，function（））{
$curr.hide（）.css（'z-index'，0）；
$next.css（'z-index'，1）；
});
}, 5000);
$（'.mySlides'）.hover（函数（）{
间隔时间；
}，函数（）{
间隔=设置间隔（函数（）{
var$curr=$（'.mySlides:visible'），
$next=（$curr.next（）.length）？$curr.next（）：$（'.mySlides'）.first（）；
$next.css（'z-index'，2）.fadeIn（'slow'，function（））{
$curr.hide（）.css（'z-index'，0）；
$next.css（'z-index'，1）；
});
}, 5000);
});
});
/*滑块*/
#集装箱码头{
宽度：100%；
保证金：0自动；
溢出：隐藏；
高度：536px；
位置：相对位置；
}
#集装箱船a:悬停{
颜色：白色；
}
#集装箱保险公司{
边际：0px；
填充：0px；
宽度：100%；
列表样式：无；
身高：100%；
位置：绝对位置；
}
#集装箱保险公司{
身高：100%；
显示：无；
位置：相对位置；
}
#第一个孩子{
显示：块；
}
#集装箱保险公司{
宽度：100%；
最小高度：100%；
}
/*褪色*/
迈斯利德斯先生{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
@关键帧淡入淡出{
来自{opacity:.4}
到{opacity:1}
}
/*幻灯片标题*/
.文本{
保证金：0；
填充：20px 0 25px；
字体大小：40px；
字号：600；
颜色：#f7f7f7；
文本对齐：居中；
位置：绝对位置；
字体系列：“蒙特塞拉特”，无衬线；
}
/*箭*/
.prev，.next{
z指数：99；
光标：指针；
位置：绝对位置；
显示：块；
最高：40%；
宽度：自动；
颜色：#fff；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
填充：25px 25px 25px 25px；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，.next:悬停{
背景色：rgba（0,0,0,0.8）；
文字装饰：无；
}
/*圆点*/
多迪夫先生{
底部：10px；
位置：绝对位置；
宽度：100%；
文本对齐：居中；
z指数：99；
}
多特先生{
光标：指针；
高度：6px；
宽度：6px；
边际：0.2px；
背景色：#eee；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
z指数：99；
}
.active，.dot:悬停{
背景色：#717171；
}



艾丽西


光环


倾斜


未知艺术家


英萨


蓝光


户外节日


❮
❯
为了使您的代码更加灵活和简洁，我对代码做了很多修改。

更改太多，无法解释每一行，因此我在下面的代码段中使用注释来解释每一行的作用

但我将总结最主要的变化：


我把所有的幻灯片排成一列。在该数组中，每个幻灯片都由一个包含
txt
和
img
属性的对象表示。数组的第一个索引（
[0]
）用于存储幻灯片索引。

我从HTML中删除了
和所有
，并将它们替换为一个
。我改变了图像的来源，而不是切换元素。

这样，您就不必在HTML中添加新幻灯片，只需在JS中的幻灯片数组中添加一个幻灯片对象即可
我将
onclick
处理程序（用于箭头和项目符号/点）从HTML移动到JS。将所有JS代码保留在HTML之外被认为是一种良好的做法
不要太注意CSS中的所有“更改”。大多数情况下，这些只是为了我自己的可读性而对内容进行重新排序和格式化，但我承认这是一种后天的品味：）

然而，可能有一些实际的改变对正确的布局/功能至关重要，但正如我所说，我改变了太多以至于我都不记得了

不幸的是，我无法让CSS
fade
动画（参见下面的代码块）与新代码一起工作。因为现在所有幻灯片只有一个元素，切换源而不是元素，动画不再启动。我尝试了很多事情，但没有成功

/* FADE */
.slide {-webkit-animation-name:fade; -webkit-animation-duration:1.5s; animation-name:fade; animation-duration:1.5s;}
@-webkit-keyframes fade {from {opacity:.4} to {opacity:1}}
@keyframes fade {from {opacity:.4} to {opacity:1}}

所以我不得不把动画移到JS，usi
$(".slide").fadeTo(0,.4,function(){$(this).fadeTo(1500,1);});