html - 图像幻灯片的行为与 CSS 不符合预期

Question

我曾尝试将一些用于图像幻灯片的代码合并到我的网站中，但现有的 CSS 导致幻灯片无法按预期工作。

当我从 CSS 中取出幻灯片代码时，它在屏幕上显示为一个图像元素，每 2 秒更改一次其 img src，这是正确的行为。

当我将代码放入 CSS 中时，两个不同的图像元素内联显示在屏幕上。我整天都在摆弄 CSS，似乎无法弄清楚如何修复它。我敢肯定这很简单。欢迎任何帮助。

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds}

#banner .content .image {
  border-radius: 100%;
  display: inline-block;
  height: 18em;
  margin-left: 3em;
  vertical-align: middle;
  width: 18em;
}

#banner .content .image img {
  border-radius: 100%;
  display: block;
  width: 100%;
}

<section id="banner">
  <div class="content">
    <header>
      <h2>header text</h2>
      <p>more text<br />
      </p>
    </header>
    <span class="image"><img class="mySlides" src="images/pic01.jpg" alt="" 
        /></span>
    <span class="image"><img class="mySlides" src="images/pic02.jpg" alt="" 
        /></span>
  </div>

Answer 1

在您的示例代码中，您的 JavaScript 缺少右大括号(右大括号在技术上位于 JavaScript 注释中)。一旦我清理了它，一切似乎都在工作。

var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {
    myIndex = 1
  }
  x[myIndex - 1].style.display = "block";
  setTimeout(carousel, 2000); // Change image every 2 seconds}
}

#banner .content .image {
  border-radius: 100%;
  display: inline-block;
  height: 18em;
  margin-left: 3em;
  vertical-align: middle;
  width: 18em;
}

#banner .content .image img {
  border-radius: 100%;
  display: block;
  width: 100%;
}

<div class="content">
  <header>
    <h2>header text</h2>
    <p>more text<br />
    </p>
  </header>
  <span class="image"><img class="mySlides" src="http://placekitten.com/200/300" alt="" 
    /></span>
  <span class="image"><img class="mySlides" src="http://placekitten.com/200/200" alt="" 
    /></span>
</div>

jsFiddle