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);

Answer 2

您的代码会同时启动所有超时，因此它们都将同时完成。您必须嵌套它们才能使它们彼此执行，如下所示：

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中包含的许多图像元素。它在live demo上运行。

PS：您可以使用CSS类将相同的样式应用于多个HTML元素。

尝试创建备用图片横幅，但无法正常工作

2 个答案: