javascript - 尝试创建交替图像横幅，但它无法正常工作

Question

我在横幅中放置了三张图像，全部设置为 position:absolute; 并层叠在一起。我希望做的是使用 setTimeout() 和 fadeOut() 和 fadeIn() 方法在三个不同的图像之间交替显示。有些事情正在发生，但并不是我真正想要的。每个图像之间不是平滑过渡，而是在最后一个图像和第二个图像之间来回切换，第一个图像根本不会出现。这是我正在使用的代码:

setInterval(function()
        {
          setTimeout($("#banner_city").fadeOut(), 5000);
          setTimeout($("#banner_dispatch").fadeOut(), 5000);
          setTimeout($("#banner_vehicles").fadeOut(), 5000);
          setTimeout($("#banner_city").fadeIn(), 5000);
          setTimeout($("#banner_dispatch").fadeIn(), 5000);
          setTimeout($("#banner_vehicles").fadeIn(), 5000);
        }, 32401);

我不确定它是否相关，但以防万一，这里还有 html 和 css 。 HTML:

<div id="banner">
  <img src="images/banner/city.jpg" id="banner_city" />
  <img src="images/banner/dispatch.jpg" id="banner_dispatch" />
  <img src="images/banner/vehicles.jpg" id="banner_vehicles" />
</div>

CSS:

#banner {
  margin-top: 12px;
  position: relative;
  width: 833px;
  height: 237px;
}

#banner_city {
  position: absolute;
  right: 0;
  top: 0;
  width: 833px;
  height: 237px;
}

#banner_dispatch {
  position: absolute;
  right: 0;
  top: 0;
  width: 833px;
  height: 237px;
}

#banner_vehicles {
  position: absolute;
  right: 0;
  top: 0;
  width: 833px;
  height: 237px;
}

有人能解释一下为什么它的行为如此错误吗？预先非常感谢。

Answer 1

您的 setInterval 基本上是告诉所有内容同时淡出和淡入，这不是您想要的。

这里有两种方法:有 3 个单独的间隔来淡化每个“步骤”，或者有 1 个间隔和一些内部计数器来跟踪要显示的内容。

这是第一种方法:

function fadeOne() {
  $("#banner_city").fadeOut();
  $("#banner_dispatch").fadeIn();
};

function fadeTwo() {
  $("#banner_dispatch").fadeOut();
  $("#banner_vehicles").fadeIn();
}

function fadeThree() {
  $("#banner_vehicles").fadeOut();
  $("#banner_city").fadeIn();
}

fadeOne();
setInterval(fadeOne, 15000);

setTimeout(() => {
  fadeTwo();
  setInterval(fadeTwo, 15000);
}, 5000);

setTimeout(() => {
  fadeThree();
  setInterval(fadeThree, 15000);
}, 10000);

这实际上是三个函数，每个函数调用间隔 15 秒，第二个和第三个函数有 5/10 秒的延迟。

第二种方法，将它们结合在一起:

let count = 0;

function fade() {
  switch (count++ % 3) {
    case 0:
      fadeOne();
      return;
    case 1:
      fadeTwo();
      return;
    case 2:
      fadeThree();
      return;
   }
}

fade();
setInterval(fade, 5000);