Попытка создать баннер с альтернативным изображением, но он работает неправильно

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

Ваш код запускает все таймауты одновременно, поэтому они завершаются одновременно.Вы должны будете вкладывать их, чтобы заставить их выполнять друг за другом, например:

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.

Answer 2

Ваш 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);