Javascript 带手动控制的滑块不是自动播放-可能是setInterval行为的问题？

我正在开发一个纯JavaScript滑块，使用超时自动切换滑块。就这一点而言，一切都很好

但是，当我尝试添加控制按钮时，它们不起作用。相反，它会等待页面设置为“切换”（由超时定义），然后再继续

这可能是什么原因，我该如何修复它？我曾尝试在按下按钮时使用

clearTimeout（）

方法（在尝试更改幻灯片之前），但没有效果

下面是我的代码：

document.body.onload=（）=>{
var items=document.getElementsByClassName（'item'）；
var nextButton=document.getElementById（'next'）；
var prevButton=document.getElementById（'prev'）；
var currentSlide=函数（）{
对于（var j=0；jitems.length-1）{
currentslideinner=0；
}
console.log（currentslideinner）；
items[currentslideinner].classList.add（“活动”）；
}, 4000);
}
幻灯片（）；
addEventListener（'click'，function（）{
设currentSlide1=currentSlide（）；
如果（当前幻灯片10）{
项[currentSlide1]。类列表。删除（“活动”）；
items[currentSlide1-1].classList.add（“活动”）；
幻灯片放映（当前幻灯片1-1）；
}
});
}

*，
身体{
保证金：0；
填充：0；
}
.集装箱{
宽度：100%；
身高：100%；
最大宽度：1170px；
保证金：0自动；
}
h1{
文本对齐：居中；
}
#旋转木马{
边缘顶部：20px；
宽度：100%；
高度：自动；
最小高度：400px；
显示：块；
框大小：边框框；
溢出：隐藏；
位置：相对位置；
}
.项目{
位置：绝对位置；
宽度：100%；
身高：100%；
显示：无；
}
.item.active{
显示：块；
动画：fadesIn 2000ms向前；
-webkit动画：fadesIn 2000ms向前；
}
@关键帧淡入淡出{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.项目分部旋转木马内容{
位置：绝对位置；
字体系列：“Courier New”，Courier，monospace；
宽度：100%；
文本对齐：居中；
框大小：边框框；
填充：50px；
最高：50%；
转换：translateY（-50%）
}
.项目分部转盘内容标题{
字体系列：“Gill Sans”，“Gill Sans MT”，“Calibri”，“Trebuchet MS”，无衬线；
字体大小：24px；
宽度：100%；
文本对齐：居中；
}
.项目分类转盘内容说明{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
宽度：100%；
文本对齐：居中；
}
#项目1{
背景颜色：海蓝宝石；
}
#项目2{
背景色：深蓝色；
}
#项目3{
背景颜色：棕色；
}
#项目4{
背景颜色：白杏仁；
}
#下一个{
位置：绝对位置；
最高：50%；
z指数：2；
右：0px；
转化：translateY（-50%）；
}
#上{
位置：绝对位置；
最高：50%；
z指数：2；
左：0px；
转化：translateY（-50%）；
}

我最棒的旋转木马
很棒的旋转木马
同侧眼底1
我的同僚们，我的同僚们，我的同僚们
精英。准非自由占有权，是一种自由权利
在里面最大限度地使用液体！
维罗，不流动！
同侧视野2
我的同僚们，我的同僚们，我的同僚们
精英。准非自由占有权，是一种自由权利
在里面最大限度地使用液体！
维罗，不流动！
同侧视野3
我的同僚们，我的同僚们，我的同僚们
精英。准非自由占有权，是一种自由权利
在里面最大限度地使用液体！
维罗，不流动！
同侧视野4
我的同僚们，我的同僚们，我的同僚们
精英。准非自由占有权，是一种自由权利
在里面最大限度地使用液体！
维罗，不流动！

试试：

document.body.onload=（）=>{
var items=document.getElementsByClassName（'item'）；
var nextButton=document.getElementById（'next'）；
var prevButton=document.getElementById（'prev'）；
var currentSlide=函数（）{
对于（var j=0；jitems.length-1）{
currentslideinner=0；
}
console.log（currentslideinner）；
items[currentslideinner].classList.add（“活动”）；
}, 4