Javascript 试图创建一个交替的图像横幅，但工作不正常

我在横幅上有三幅图片，都设置了

位置：绝对并层叠在一起。我希望做的是使用
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>

有没有人能解释一下为什么这会有如此多的问题？非常感谢。
您的设置间隔基本上是告诉所有内容同时淡出和淡入，这不是您想要的

这里有两种方法：每个“步骤”有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);

你的设定间隔基本上是告诉所有东西同时淡出和淡入，这不是你想要的

这里有两种方法：每个“步骤”有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);

您的代码同时启动所有超时，因此它们都在同一时间完成。您必须嵌套它们，使它们能够在彼此之后执行，如下所示：

setTimeout(function() {
    // Do something
    // ...
    setTimeout(function() {
        // Do something else
        // ...
        setTimeout(...)
    }, 1000)
}, 1000)

这相当混乱，所以这里有另一种方法可以满足您的需要：

// Get all the image elements
var images = $(".banner-image");

// Hide all the images
images.hide();

// Start the cycle
cycle();
setInterval(cycle, 1000);

var index = 0;
function cycle() {
  // Fade out all images
  images.fadeOut();
  // Fade in the next image
  images.eq(index).fadeIn();
  // Increment the index
  index++;
  // Reset index after cycling through all images
  if ((index % images.length) === 0) index = 0;
}

此代码将适应HTML中包含的图像元素的数量。在这里，它是在一个平台上运行的

PS：您可以使用CSS类将相同的样式应用于多个HTML元素。
您的代码在同一时间启动所有超时，因此它们都在同一时间完成。您必须嵌套它们，使它们能够在彼此之后执行，如下所示：

setTimeout(function() {
    // Do something
    // ...
    setTimeout(function() {
        // Do something else
        // ...
        setTimeout(...)
    }, 1000)
}, 1000)

这相当混乱，所以这里有另一种方法可以满足您的需要：

// Get all the image elements
var images = $(".banner-image");

// Hide all the images
images.hide();

// Start the cycle
cycle();
setInterval(cycle, 1000);

var index = 0;
function cycle() {
  // Fade out all images
  images.fadeOut();
  // Fade in the next image
  images.eq(index).fadeIn();
  // Increment the index
  index++;
  // Reset index after cycling through all images
  if ((index % images.length) === 0) index = 0;
}

此代码将适应HTML中包含的图像元素的数量。在这里，它是在一个平台上运行的

PS：您可以使用CSS类将相同的样式应用于多个HTML元素。
非常感谢。我研究了你的代码和解释，这有助于我理解发生了什么，这样我就能够编写自己独特的代码来解决这个问题。再次感谢，非常清楚和有用的解释。非常感谢。我研究了你的代码和解释，这有助于我理解发生了什么，这样我就能够编写自己独特的代码来解决这个问题。再次感谢，非常清楚和有益的解释。