Javascript 简单javascritp幻灯片-添加控件

更新：
我在做简单的歌词幻灯片，我用了一些js幻灯片，并修改了它。 我的问题是，能不能用更简单的方法来完成——原始代码已经对自动播放等进行了计时？/
我只想显示/隐藏div-从第一个开始排序-在上一个/下一个div上单击onclick、left/right或pgup/pgdn键并滚动鼠标滚轮

//幻灯片放映-
//https://www.w3schools.com/howto/howto_js_slideshow.asp 
var slideIndex=1；放映幻灯片（幻灯片索引）；
函数plusSlides（n）{showSlides（slideIndex+=n）；}
函数currentSlide（n）{showSlides（slideIndex=n）；}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“幻灯片”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

这对于SO来说有点宽泛。你的具体问题是什么？如果你想要的话，这里有一个代码回顾SE。只是为了做更简单的js切换幻灯片。最初它包含自动播放、底部的点等。我不知道我可以擦除哪些代码来清理它。然后添加控件（箭头、鼠标）。好的，圆点等都是通过实验清洗的。现在请谈谈键盘控制？关于你问题的细节应该在问题中，而不是评论中。评论可以删除。只需回答问题并添加详细信息。

//slideshow - 
//https://www.w3schools.com/howto/howto_js_slideshow.asp 
var slideIndex = 1; showSlides(slideIndex);
function plusSlides(n) {   showSlides(slideIndex += n); }
function currentSlide(n) {   showSlides(slideIndex = n); }
function showSlides(n) {

  var i;
  var slides = document.getElementsByClassName("slide");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "flex";  
  dots[slideIndex-1].className += " active";
}