Question

我正在为我的网站设置一个滑块，但我遇到了一些问题。

我使用bxslider我希望通过添加animate.css为每张幻灯片中的文字添加动画。 Animate.css非常简单：只需将“动画”和动画名称作为类添加到动画元素中。

基本上，在滑块完成向幻灯片的过渡后，我希望文本显示在带动画的幻灯片上。我还希望文本在使用下一个文本转换到下一张幻灯片之前淡出。

由于滑块具有回调函数，我认为只需添加必要的CSS类就可以了。

JQUERY

$(document).ready(function(){

    $(".bxslider").bxSlider({
        auto: true,
        startSlide: 0,
        slideWidth: 640,
        onSlideAfter: function(){
        $(".title").addClass("animated bounceInRight");
        $(".text").addClass("animated bounceInRight");
        },
        onSlideBefore: function(){
        $(".title").removeClass("animated bounceInRight");
        $(".text").removeClass("animated bounceInRight");
        }
  });
});

HTML

<ul class="bxslider">
  <li><img src="" />
<h1 class="title animated bounceInRight">TITLE 1</h1><p class="text animated bounceInRight">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 2</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 3</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
  <li><img src="" /><h1 class="title">TITLE 4</h1><p class="text">
  text text text text text text
  text text text text text text

 </p></li>
</ul>

CSS 1 （我添加到滑块的默认CSS中）

.bxslider {
    padding: 0;
    margin: 0;
    list-style: none;
}
.title {
    position: absolute;
    top:100px;
    left: 100px;
    color: #FFF;
    font-family: Helvetica;
}
.text {
    display: block;
    position: absolute;
    top:200px;
    left: 200px;
    color: #000;
    font-family: Helvetica;
    width: 300px;
    background: #FFF;
    -webkit-animation-delay: 1s; /* to delay text "entrance" */

}

CSS 2 （动画“触发器”......不同的动画只是带有关键帧的CSS3动画等等）

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

我在网上放了一个示例滑块：bxslider test。

到目前为止存在一些问题。我将始终引用“文字”，但我指的是<h1>和<p>标记。

首先：第一张幻灯片动画正确，文字显示动画。在第二张幻灯片上，文本已经可见，然后动画开始。我希望文本能够“通过”动画。

第二次：我尝试添加fadeOut-effect（再次添加和删除相应的CSS类）。它将无效，fadeOut将在转换到下一张幻灯片后发生。我想我在添加和删除类时犯了一些根本性的错误，但我无法弄明白。

第三次：我可以在每张幻灯片上使用不同的入口效果，甚至可以随机使用吗？

第四：Safari中似乎存在错误。在我的计算机（Safari和Chrome）上，幻灯片显示从第一张幻灯片开始。在Safari的网络服务器上，最后一张幻灯片首先可见，然后直接将第一张幻灯片滚动到第二张幻灯片...非常奇怪。在Chrome中幻灯片显示正常。根据Safari的日志

，代码没有问题

如果有人可以帮我解决这个问题，那将是非常好的，至少对于前两个问题。

谢谢！

Answer 1

怎么做：

<强> HTML：

<section class="slider">  
    <ul class="bxslider" >
        <li><img src="foto-1.jpg"/>
            <div class="one slider-text">your text</div>
        </li>
        <li><img src="foto-2.jpg"/>
        <div class="slider-text">your text 2</div>
        </li>       
        <li><img src="foto-3.jpg"/>
        <div class="slider-text">your text3 </div>
        </li>                    
    </ul>
</section>

<强> CSS：

.slider .slider-text {
    font-size: 250%;
    color: #fff;
    position: absolute;
    z-index: 9999;
    text-align: center;
    bottom: 20%;
    width: 100%;  
}
.slider-text {
    visibility:hidden;
}
.slider-text.active-slide {
    visibility: visible;
}

<强> JQUERY：

$('.bxslider').bxSlider({
    auto: true,
    preloadImages: 'all',
    mode: 'horizontal',
    captions: false,
    controls: false,
    pause: 5000,
    speed: 800,
    onSliderLoad: function () {
        $('.bxslider>li .slider-text').eq(1).addClass('active-slide');
        $(".slider-text.active-slide").addClass("wow animated bounceInRight");
    },
    onSlideAfter: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
        console.log(currentSlideHtmlObject);
        $('.active-slide').removeClass('active-slide');
        $('.bxslider>li .slider-text').eq(currentSlideHtmlObject + 1).addClass('active-slide');
        $(".slider-text.active-slide").addClass("wow animated bounceInRight");

    },
    onSlideBefore: function () {
        $(".slider-text.active-slide").removeClass("wow animated bounceInRight");
        $(".one.slider-text.active-slide").removeAttr('style');

    }
});

我用：
BxSlider v4.1.2
jQuery v1.11.2
最新的Animate.css

您可以使用：
wow.js

Answer 2

只需你可以使用wow js然后添加正常的类每次重新初始化哇

$(document).ready(function(){
new WOW().init();
$('.bxslider').bxSlider({
auto: true,
adaptiveHeight: true,
onSlideAfter: function () {
new WOW().init();
},
onSlideBefore: function () {

new WOW().init();
}


});

});

bxslider文本效果animate.css

2 个答案: