幻灯片放映后弹性滑块回调，而不是动画

flexslider callback after for slideshow not animation

本文关键字：回调 动画 幻灯片      更新时间：2023-09-26

我有一个事件，我想在幻灯片完成后隐藏，而不是动画。

这是我想要显示和隐藏的项目的 CSS

.myitem{  font-size: 36px;
  position: absolute;
  top: -21%;
  left: 36px;
  background: #000;
  color: #fff;
  padding: 11px 26px;}

这就是我使用的回调

  $('#slider').flexslider({
    controlNav: false,
      animation: 'slide',
    animationLoop: true,
      slideshow:true,
    sync: "#carousel",
      useCCS: false,
      easing: 'easeOutBounce',
      slideshowSpeed:2500,
    before: function(){
          $(".myitem").animate({top:"5%"});
      },
          after: function(){
          $(".myitem").animate({top:"-21%"});
      }
  });
使用"之前"，

它从顶部显示，这很好，使用"之后"它会隐藏，但在动画之后，我希望它在每次幻灯片完成后隐藏。

我不确定，flexslider 是否能够为您提供实际幻灯片的数量（或索引，其中 0 是第一个），但您需要先计算元素，将它们作为变量传递给幻灯片函数，您可以这样做（本例中有 6 个元素，索引 0 到 5）

before: function(){
    if (el.is(':eq(0)')) $(".myitem").animate({top:"5%"});
},
after: function(){
    if (el.is(':eq(5)')) $(".myitem").animate({top:"-21%"});
}
相关文章：