Javascript 具有setInterval功能的自动图像滑块不工作

滑块的第三张照片未出现在滑块上。幻灯片完全失效一段时间后，照片变化迅速。幻灯片失败后，当照片快速变化时，有时会出现第三张照片。但我不明白为什么一开始它没有出现，为什么幻灯片越来越快。我如何解决这个问题

let sliderImages=document.queryselectoral（“.slide”）；
电流=0；
函数重置（）{
for（设i=0；i
body、#slider、.wrap、.slide内容{
保证金：0；
填充：0；
宽度：100%；
高度：100vh；
溢出x：隐藏；
}
.包裹{
位置：相对位置；
}
.幻灯片{
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片1{
背景图像：url（“https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}
.幻灯片2{
背景图像：url（“https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}
.幻灯片3{
背景图像：url（“https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}
您的问题是，每次运行函数时都会设置一个新的间隔，因此最终会出现一组函数同时运行的情况。您只需要设置一次，然后该函数将每两秒被适当地调用一次。我修改了你的例子：


let sliderImages=document.queryselectoral（“.slide”）；
电流=0；
函数重置（）{
for（设i=0；i
body、#slider、.wrap、.slide内容{
保证金：0；
填充：0；
宽度：100%；
高度：100vh；
溢出x：隐藏；
}
.包裹{
位置：相对位置；
}
.幻灯片{
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片1{
背景图像：url（“https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}
.幻灯片2{
背景图像：url（“https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}
.幻灯片3{
背景图像：url（“https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}
您的问题是，每次运行函数时都会设置一个新的间隔，因此最终会出现一组函数同时运行的情况。您只需要设置一次，然后该函数将每两秒被适当地调用一次。我修改了你的例子：


let sliderImages=document.queryselectoral（“.slide”）；
电流=0；
函数重置（）{
for（设i=0；i
body、#slider、.wrap、.slide内容{
保证金：0；
填充：0；
宽度：100%；
高度：100vh；
溢出x：隐藏；
}
.包裹{
位置：相对位置；
}
.幻灯片{
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.幻灯片1{
背景图像：url（“https://images.pexels.com/photos/3153198/pexels-photo-3153198.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260");
}
.幻灯片2{
背景图像：url（“https://images.pexels.com/photos/3153208/pexels-photo-3153208.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}
.幻灯片3{
背景图像：url（“https://images.pexels.com/photos/1036641/pexels-photo-1036641.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260")
}