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

Question

我已经使用 Bootstrap 轮播实现了幻灯片放映。正如你们现在可能看到的那样，这个旋转木马非常基本，所以我想给它添加一些养眼的东西。

使用 animate.css 转换，我只想为第一张幻灯片制作动画。我试过了

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

setTimeout(function () { 

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

}, 2000);

而且有效！但是，如您所见，我正在使用 setTimeout 函数（有点奇怪）添加和删除 class。

有更简洁的方法吗？

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