Javascript 使用“下一步”和“上一步”按钮自动和手动更改幻灯片放映

我从w3schools拍摄了这张幻灯片，它每隔一段时间就会自动更改图像。但我希望除了自动更改图像外，它还可以使用prev和next按钮手动更改图像，但是prev和next按钮不会出现在自动版本的幻灯片中的任何位置。我想知道我应该添加什么使这些按钮出现和工作。 谢谢

var slideIndex=0； 放映幻灯片； 功能演示幻灯片{ var i； var slides=document.getelementsbyclassnammyslides； var dots=document.getElementsByClassNamedot； 对于i=0；islides.length{slideIndex=1} 对于i=0；i 1/3 标题文本 2/3 标题二 3/3 标题三

---

我将此添加到javascript文件：

function plusSlides(n) {
      showSlides(slideIndex += n);
    }

这是一个html文件：

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

---

现在它可以自动和手动两种方式更改，但是当您手动更改图像时，自动模式的超时时间会更改，图像更改速度会更快，它只显示两个图像，不显示第三个图像，通常会做一些奇怪的事情。

您是否尝试过创建按钮并学习如何在单击按钮时触发动作？我发现了这一点，效果很好：

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color: rgba(0,0,0,0.8);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}