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，但这对我来说更快。

用简单的j查询幻灯片替换静态背景图像

1 个答案: