Javascript幻灯片同时显示所有幻灯片

对于我的网站，我有一个JavaScript幻灯片，可以在页面加载时自动播放。这意味着要在数据库中存储的照片（名为“广告”）中循环浏览，但仅在第一个循环之后。这是因为在页面加载时，所有广告一次出现在屏幕上，并且一次只显示一个广告需要完全旋转（对于每个转换，一个广告将消失，直到在任何时间只有一个广告出现在屏幕上）

我是一名JavaScript新手，在此方面的任何帮助都将不胜感激

JavaScript:

setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 10000);

CSS:

HTML（带有嵌入式Ruby）：

“英雄”）%%>

您需要简化您的逻辑，因为目前它试图一次完成很多事情

例如：

请参阅代码片段，我添加了注释来解释：

function nextSlide () {   
  // Get current slide.
  var $currentSlide = $($slides[currentSlide]);
  
  // Remove active class from current slide.
  $currentSlide.removeClass('is-active');
  
  // Update current slide variable.
  currentSlide = (currentSlide + 1) % $slides.length;
  
  // Get next slide.
  var $nextSlide = $($slides[currentSlide]);
  
  // Add active class to next slide.
  $nextSlide.addClass('is-active');
}

var $slides = $('#slideshow > div');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);

<div class="slideshow" id="slideshow">
  <% @adverts.each do |advert| %>
    <% unless advert.poster? == false %>
      <div>
        <%= cl_image_tag(advert.advert_poster.path , :class => "hero") %>
      </div>
    <% end %>
  <% end %>
</div>

function nextSlide () {   
  // Get current slide.
  var $currentSlide = $($slides[currentSlide]);
  
  // Remove active class from current slide.
  $currentSlide.removeClass('is-active');
  
  // Update current slide variable.
  currentSlide = (currentSlide + 1) % $slides.length;
  
  // Get next slide.
  var $nextSlide = $($slides[currentSlide]);
  
  // Add active class to next slide.
  $nextSlide.addClass('is-active');
}

var $slides = $('#slideshow > div');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);