仅在首次加载页面时在第一张幻灯片上添加课程

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