Javascript幻灯片一次显示所有幻灯片答案

【问题标题】：Javascript slideshow shows all slides at onceJavascript幻灯片一次显示所有幻灯片
【发布时间】：2021-02-09 00:17:17
【问题描述】：

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

如果我是 JavaScript 新手，我将不胜感激任何帮助。

JavaScript：

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

CSS：

#slideshow {
    position: relative;
}

#slideshow > div {
    position: absolute;
}

HTML（嵌入 Ruby）：

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

【问题讨论】：

标签： javascript html css ruby-on-rails

【解决方案1】：

你需要简化你的逻辑，因为它试图一次做很多事情。

示例：https://codepen.io/alexpetergill/pen/a8d3dc22bb51127dffd202db59585f2c

看sn-p，我加了cmets来解释：

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

【讨论】：