Javascript 如何将按钮添加到自动幻灯片中？

我已经创建了一个自动幻灯片，我想知道如何添加按钮，使其与自动幻灯片同时工作。有人能帮我吗？以下是我为创建自动幻灯片而编写的代码：

（函数（）{
功能幻灯片（元素）{
this.el=document.querySelector（元素）；
this.init（）；
}
Slideshow.prototype={
init:function（）{
this.wrapper=this.el.querySelector（“.slider wrapper”）；
this.slides=this.el.queryselectoral（“.slide”）；
this.previous=this.el.querySelector（“.slider-previous”）；
this.next=this.el.querySelector（“.slider next”）；
该指数=0；
this.total=this.slides.length；
this.timer=null；
这个动作（）；
这是stopStart（）；
},
_slideTo：功能（幻灯片）{
var currentSlide=this.slides[slide]；
currentSlide.style.opacity=1；
对于（var i=0；i
html，
身体{
保证金：0；
填充：0；
}
.滑块{
宽度：100%；
利润率：2米自动；
}
.滑块包装器{
宽度：100%；
高度：400px；
位置：相对位置；
}
.幻灯片{
浮动：左；
位置：绝对位置；
宽度：100%；
身高：100%；
不透明度：0；
过渡：线性；
}
.slider wrapper>.slide:第一个子项{
不透明度：1；
}
在“下一步”和“上一步”按钮上添加单击事件功能，下次使用以下命令

self._slideTo(self.index); 

如有必要，请使用此选项

if(self.index+1 == this.slides.length)
self.index = 0 ;
else
self._slideTo(self.index -1);

添加下一个和上一个函数，如示例


（函数（）{
功能幻灯片（元素）{
this.el=document.querySelector（元素）；
this.init（）；
}
Slideshow.prototype={
init:function（）{
this.wrapper=this.el.querySelector（“.slider wrapper”）；
this.slides=this.el.queryselectoral（“.slide”）；
this.previous=this.el.querySelector（“.slider-previous”）；
this.next=this.el.querySelector（“.slider next”）；
该指数=0；
this.total=this.slides.length；
this.timer=null；
this.nextButton=this.el.querySelector（“.next”）；
this.prevButton=this.el.querySelector（“.prev”）；
这个动作（）；
这是stopStart（）；
this.nextSlide（）；
这是一张幻灯片（）；
},
_slideTo：功能（幻灯片）{
var currentSlide=this.slides[slide]；
currentSlide.style.opacity=1；
对于（var i=0；i
html，
身体{
保证金：0；
填充：0；
}
.滑块{
宽度：100%；
利润率：2米自动；
}
.滑块包装器{
宽度：100%；
高度：400px；
位置：相对位置；
}
.幻灯片{
浮动：左；
位置：绝对位置；
宽度：100%；
身高：100%；
不透明度：0；
过渡：线性；
}
.slider wrapper>.slide:第一个子项{
不透明度：1；
}
.下一个{
位置：绝对位置；
右：0；
}
上一篇{
位置：绝对位置；
左：0；
}

上
下一个
您想为什么设置按钮？对于上一个功能？？是的，@GHOST93..我可以建议您在JS类中使用一个私有方法，它可以添加按钮，您可以在CSS中为这些按钮编写样式，因此在渲染后，它们将按照编码的类进行样式设置。您需要的rest代码已经由Hasan在答案中给出了！谢谢！你真的解决了我的问题