javascript - 用简单的 jQuery 幻灯片替换静态背景图像

Question

我正忙着建立一个网站，里面有一个横幅。横幅由带有静态文本覆盖的静态背景图像组成。现在我想保留带有文本覆盖的横幅，但用简单的幻灯片替换静态背景图像。图像应每 3 秒更换一次。它应该是一个连续的循环，在页面加载事件上触发。此函数应使用 jQuery。

这是目前横幅的 html 代码:

<!--BANNER HTML-->
<div class="banner">
  <div class="banner-text">
    <h1>LONG LAYOVER?</h1>
    <h1>Is Amsterdam Schiphol your transfer hub?</h1>
    <h4>Make the most of your layover by doing some sightseeing!<br>Tailored according to the length of your layover</h4>
  </div>
</div>

这是 CSS:

.banner h1, .banner h1, .banner h4 {
  margin: 0;
  text-shadow: 2px 2px 6px #000;
  text-align: center;
}

.banner {
  color: white;
  background: url(images/bannerimage.png) top left/cover no-repeat;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

有人对我的问题有聪明的解决方案吗？

Answer 1

我想到的最简单的答案是定义函数并在超时函数中调用它们，如 DEMO here 所示。您还可以使用 togglaClass 而不是 .css() 函数。我更喜欢 toggleClass，但这样做对我来说更快。