图像幻灯片的行为与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

Answer 2

你的JS中有一个拼写错误：最后的内联注释禁用了该函数的结束括号。

// Change image every 2 seconds}
                             ^^^^^

只需删除评论，您的代码就可以使用。

Answer 3

我想到了。我只需要在一个范围内包装BOTH图像

<span class="image"><img class="mySlides" src="images/pic01.jpg" alt="" />
<img class="mySlides" src="images/pic02.jpg" alt="" /></span>