0

我正在使用 flex 滑块中的内容滑块。从下面提到的 html 代码和 javascript 中，滑块和内容对我来说很好，具有滑块幻灯片动画效果。

但是滑动的时候内容突然来了。我想要在滑动时为该内容添加淡入淡出效果，这样我的滑块看起来就很漂亮了。

我的html代码是，

  <section class="slider">
    <div class="flexslider">
      <ul class="slides">
        <li>
        <div class="image"><a href="#"><img src="images/1.jpg"/></a></div>
                <div class="data">
                    <h4>First Heading</h4>
                    <p>First Para</p>
                    <span>Read More</span>
                </div>
        </li>

         <li>
        <div class="image"><a href="#"><img src="images/2.jpg"/></a></div>
                <div class="data">
                    <h4>Second Heading</h4>
                    <p>Second Para</p>
                    <span>Read More</span>
                </div>
        </li>


      </ul>
    </div>
  </section>

我的 javascript 是，

(function($){
  SyntaxHighlighter.all();
});
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 7000,


  });
})(jQuery);
4

1 回答 1

2

来自Flexslider 文档：

before: function(){}, //Callback: function(slider) - 与每个滑块动画异步触发

slider.animatingTo //Int：在.before()中有用，当前动画到的幻灯片

所以你可以做这样的事情：

// 有一个动画速度的变量，
// 这样我们就可以保持“幻灯片”和“淡出”同步。
var myAnimationSpeed = 600;

$('.flexslider').flexslider({
  动画：“幻灯片”，
  幻灯片速度：7000，
  动画速度：我的动画速度，
  之前：函数（滑块）{
    $('ul.slides li:eq(' + slider.animatingTo + ') div.data') // 选择下一张幻灯片
    .hide() // 隐藏它...
    .fadeIn(myAnimationSpeed); // ...并褪色！
  }

});
于 2013-11-05T06:54:50.057 回答