Question

我有一个滑块，它会自动更改内容。

<div class="main-slider">
  <div class="slide slide-active" data-num="1"> <img> </div>
  <div class="slide"  data-num="1"> <img> </div>
  <div class="slide" data-num="2"> <img> </div>
  <div class="slide"  data-num="3"> <img> </div>
</div>

此处当滑块正在运行时，此幻灯片活动类会自动更改为下一张幻灯片。

我需要的是，我需要在更改幻灯片活动类时触发事件。例如，我需要提醒活动幻灯片的相应data-num值。

我怎么能这样做？

Answer 1

由于您使用的是FlexSlider，请参阅原始文档。它有一个名为after的事件，当幻灯片动画化时会触发该事件。

$(".main-slider").flexslider({
  after: function(){
     alert($(".slide-active:eq(0)").attr("data-num"));
  }
});

希望这可能会有所帮助......

详细了解此处 https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties

Answer 2

如果id没有弄错，你的代码已经将slide-active类移到了下一张幻灯片，对吗？所以为了制作滑块，你需要一个for循环，你设置var i并每次添加一个。（从0索引号开始，直到你的slide班级号码）你应该在for循环中添加alert事件，这样当幻灯片更改时它会触发警报。

这可能有点混乱，所以PLZ添加你的JS代码，所以我可以帮助你更好

祝你好运

在jquery中添加类后触发事件

2 个答案: