Question

这是我对猫头鹰旋转木马的代码和效果

$(document).ready(function(){
          $(".owl-carousel").owlCarousel({
              autoplay:true,
              autoplayTimeout:2000,
              autoplayHoverPause:true,
              dots: true,
              merge:false,
              loop:true,
              items:1,
              animateOut: 'bounce',
              animateIn: 'zoomIn',
          });
        });

这里仅使用一个动画

animateOut: 'bounce',
animateIn: 'zoomIn',

我想在这里使用随机动画。我该怎么做？

Answer 1

试试这个：

function getRandomAnimation(){
    var animationList = ['bounce', 'zoomIn']; 
    return animationList[Math.floor(Math.random() * animationList.length)];
}    

$(document).ready(function(){
      let props = {
          autoplay:true,
          autoplayTimeout:2000,
          autoplayHoverPause:true,
          dots: true,
          merge:false,
          loop:true,
          items:1
      };

      props['animateOut'] = getRandomAnimation();
      props['animateIn'] = getRandomAnimation();

      $(".owl-carousel").owlCarousel(props);
});

Answer 2

@ ykaragol的回答确实会创建随机属性，但仅在第一次加载时，如果您还希望每次滑块更改时都有随机动画，请在owl轮播库文件中执行以下更改（注意：我正在使用猫头鹰轮播） v2.1.0代码在其他版本中可能有所不同）：

在第一个地方的2个地方找到this.core.settings.animateIn，代码将是这样的：

        var left,
        clear = $.proxy(this.clear, this),
        previous = this.core.$stage.children().eq(this.previous),
        next = this.core.$stage.children().eq(this.next),
        incoming = this.core.settings.animateIn,
        outgoing = this.core.settings.animateOut;

继续之后，在此之后添加此代码：

        if(incoming.constructor == Array){
            incoming = incoming[Math.floor(Math.random() * incoming.length)];
        }

        if(outgoing.constructor == Array){
            outgoing = outgoing[Math.floor(Math.random() * outgoing.length)];
        }

现在再次在文件中找到this.core.settings.animateIn，它将围绕这样的代码：

    $(e.target).css( { 'left': '' } )
        .removeClass('animated owl-animated-out owl-animated-in')
        .removeClass(this.core.settings.animateIn);
        .removeClass(this.core.settings.animateOut);
    this.core.onTransitionEnd();

将其更改为：

    var incoming = this.core.settings.animateIn;
    var outgoing = this.core.settings.animateOut

    if(incoming.constructor == Array){
        for (var i = incoming.length - 1; i >= 0; i--) {
            $(e.target).removeClass(incoming[i]);
        }
    }else{
        $(e.target).removeClass(this.core.settings.animateIn);
    }
    if(outgoing.constructor == Array){
        for (var i = outgoing.length - 1; i >= 0; i--) {
            $(e.target).removeClass(outgoing[i]);
        }
    }else{
        $(e.target).removeClass(this.core.settings.animateOut);
    }

    $(e.target).css( { 'left': '' } )
        .removeClass('animated owl-animated-out owl-animated-in');
    this.core.onTransitionEnd();

现在这应该只需将动画数组传递给动画属性，如下所示：

    $owlSty1.owlCarousel({
        animateOut: ['slideOutDown', 'zoomOut'],
        animateIn: ['flipInX', 'zoomIn'],
        loop: true,
        nav: false,
        items: 1,
        dots: true,
        responsive: false,
        autoplay: true,
        autoplayTimeout: 6000,
        rtl: directionRTL
    });

如何在猫头鹰旋转木马中添加随机动画效果？

2 个答案: