Javascript slideshow一次显示所有幻灯片

Question

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

任何关于这方面的帮助将是非常感激的，因为我是一个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>

Answer 1

你需要简化你的逻辑，因为目前它试图同时做很多事情。

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

见代码片段，我添加了注释来解释:

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