Javascript 如何在猫头鹰转盘中添加随机动画效果？_Javascript_Jquery_Owl Carousel

Javascript 如何在猫头鹰转盘中添加随机动画效果？

javascript jquery

Javascript 如何在猫头鹰转盘中添加随机动画效果？,javascript,jquery,owl-carousel,Javascript,Jquery,Owl Carousel,这是我对猫头鹰旋转木马的代码和效果 $(document).ready(function(){ $(".owl-carousel").owlCarousel({ autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true, dots: true, merge:false,

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

$(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',

我想在这里使用随机动画。我如何才能做到这一点？

试试这个：

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);
});

试试这个：

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);
});

@ykaragol的答案确实创建了随机属性，但仅在第一次加载时，与我一样，如果您也希望在滑块每次更改时都有随机动画，则在owl旋转木马库文件中执行以下更改（注意：我使用的是owl旋转木马v2.1.0，其他版本中的代码可能不同）：

查找

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;

    $(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();

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

继续操作，然后立即添加此代码：

        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

，它将围绕如下代码：

        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;

    $(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();

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

将其更改为：

    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();

现在，只需通过传递一个动画数组来设置属性动画即可，如下所示：

        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;

    $(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();

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

查找

this.core.settings.animateIn