僅在首次加載頁面時在第一張幻燈片上添加課程

Question

我已經使用Bootstrap Carousel實現了幻燈片放映。 你們現在可能已經知道，這種旋轉木馬非常基本，所以我想在上面添加一些糖果。

使用animate.css過渡，我只想動畫第一張幻燈片。 我試過了

$('.caption-wrapper').addClass('scrollpoint sp-effect3');

setTimeout(function () { 

$('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');

}, 2000);

而且有效！ 但是，正如您所看到的，我正在使用setTimeout函數添加和刪除一個類（有點奇怪）。

有沒有更清潔的方法可以做到這一點？

Answer 1

因此，基本上，如@isherwoord所述，我使用了Bootstrap輪播可用事件，在本例中為“ slide”事件。 答案是：

$('#slideshow').on('slide.bs.carousel', function () {

  $('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');

});

這比我原來的解決方案優雅得多。

Answer 2

您是否正在尋找這樣的東西：

$(document).ready(function() {
  function slider(){
       $('.caption-wrapper').addClass('scrollpoint sp-effect3',function(){
       setTimeout(function () { 
           $('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
           }, 2000);
       });
   }
  setInterval(slider,3000);
});