Question

我正在尝试使用jQuery bxSlider淡入幻灯片中的元素。我试图弄清楚我将如何使用currentSlideHtmlObject来取回动画幻灯片中的H1。这是我现在的代码。动画在第一张幻灯片上运行，但我不能让它在每个幻灯片转换上运行。我发现currentSlideHtmlObject的选项添加到onAfterSlide：function（）但不知道我将如何使用它来定位幻灯片中的每个h1。

$(function(){
     $(".sliderWrapper li").each(function(index) {
      $(this).addClass('slide' + index);
    });
     $(".sliderWrapper").bxSlider({
        mode: 'fade',
        speed:500,
        pause: 8000,
        auto:true,
        autoHover: true,
        onAfterSlide: function(){

            $(".sliderWrapper li h1").each(function(){
                 $(this).animate({
                    opacity: 0.4,
                    fontSize: "3em",
                  });
            });
        },
    });


}); 

<ul class="sliderWrapper">
  <li><img src="images/jetGuy.png"/>
    <h1>professionalism defined.</h1>
    <div class="popup">popup</div>
  </li>
  <li><img src="images/jet.png" />
    <h1>professionalism defined.</h1>
    <div class="popup">popup</div>
  </li>
  <li><img src="images/personal.png" />
    <h1>professionalism defined.</h1>
    <div class="popup">popup</div>
  </li>
</ul>

Answer 1

使用 -

$(".sliderWrapper li:eq(currentSlide) h1").animate({
                opacity: 0.4,
                fontSize: "3em",
              });

而不是 -

$(".sliderWrapper li h1").each(function(){
             $(this).animate({
                opacity: 0.4,
                fontSize: "3em",
              });
        });

在后滑动功能中。

希望它有所帮助。

jQuery bxSlider高级配置

1 个答案: