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轮播可用事件，在这种情况下是“幻灯片”事件。这是答案：

$('#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);
});

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

2 个答案: