Question

对于我的网站，我有一个 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>

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

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

1 个答案: