我对为作业制作的幻灯片有疑问。我的调试技巧不是最好的，因为我对 HTML 和 JS 还不熟悉。我的问题来自于幻灯片 JS 中某一行的 typeError。问题出在这个块中：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {
    slideIndex = 1
  }
  slides[slideIndex - 1].style.display = "block";
  setTimeout(showSlides, 4000);
}

我的 HTML 是：

    <img class="mySlides" src="http://www.kitchenaid.com/images/global/masthead-major-appliances.jpg">
<img class="mySlides" src="http://www.depotkitchen.com/wp-content/uploads/2015/05/kitchen-aid-appliances-1.jpg">
<img class="mySlides" src="http://washburns.com/media/k2/galleries/11/stainlesssteelkitchen2.jpg">
<img class="mySlides" src="https://www.appliancedepot.com/media/R37672.jpg">

问题出在行 slides[slideIndex-1].style.display = "block"; 我收到错误：

TypeError: slides[{slideIndex-1)] is undefined.

有人知道这个问题的解决方案吗？谢谢帮助！

以下是调试页面上错误的屏幕截图：

调试页面和错误展示