javascript - 主页横幅幻灯片无法正常运行

Question

我正在尝试在我正在处理的主页上制作一个带有更改标题的图像幻灯片。我使用 w3schools 作为教程，我在那里工作，但是当我将代码放入我的文本编辑器时，没有任何反应；没有渲染。我正在使用 Atom 并在其 html 预览屏幕中运行代码，并在我的浏览器中打开文件。我正在使用外部 CSS 和 JavaScript 文件并使用 css-grid 进行布局。

这是我的 HTML:

<div class="slideshow-container">

  <div class="mySlides fade">
    <img src="headerpark.jpg" style="width:100%">
    <div class="text">Caption One</div>
  </div>

  <div class="mySlides fade">
    <img src="headerpark2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <img src="headerpark3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
</div>

我的 CSS:

.mySlides {display: none}

.slideshow-container {
   grid-area: banner;
   height: auto;
   max-height: 100vh;
   position: relative;
   justify-self: stretch;
}

.slideshow-container img {
  vertical-align: middle;
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

最后是我的 JavaScript:

var slideIndex = 0;
showSlides(slideIndex);

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, 5000);
}

Answer 1

您的代码看起来不错。尝试将其复制到在线 IDE(例如 codepen.io)中，看看它是否有效。它可能只是您的浏览器(模拟器？)。