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

Add class only on first slide the first time the page loads

本文关键字：一张 幻灯片 添加 加载 第一次      更新时间：2023-09-26

我已经使用Bootstrap Carousel实现了一个幻灯片放映。就像你们现在可能的那样，这个旋转木马是非常基本的，所以我想在它上面添加一些养眼的东西

使用animate.css过渡，我只想设置第一张幻灯片的动画。我试过

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

它起作用了！然而，正如您所看到的，我正在使用setTimeout函数添加和删除一个类（这有点奇怪）。

有更干净的方法吗？

所以基本上，正如@isherwood所提到的，我使用了Bootstrap carousel可用事件，在本例中是"幻灯片"事件。答案是：

$('#slideshow').on('slide.bs.carousel', function () {
  $('.caption-wrapper').removeClass('scrollpoint sp-effect3 animated fadeInDown');
});

这是我最初拥有的更优雅的解决方案。

你在寻找这样的东西吗：

$(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);
});
相关文章：