jQuery Orbit - 如何制作随机幻灯片？

问题描述

我为我的网站找到了一个很酷的幻灯片。

I have found a cool slideshow for my website.

当页面加载时，第一张图片出现在幻灯片中。

When the page loads, the first picture appears in the slideshow.

我希望幻灯片在页面加载时随机显示一些图片。

I want slideshow to randomly display some pictures when the page loads.

Javascript代码：

Javascript Code :

 (function($) {
    $.fn.orbit = function(options) {

    var defaults = {
    animation: 'fade',
    animationSpeed: 800,
    timer: false,
    advanceSpeed: 4000,
    pauseOnHover: false,
    startClockOnMouseOut: false,
    startClockOnMouseOutAfter: 1000,
    directionalNav: true,
    captions: true,
    captionAnimation: 'fade',
    captionAnimationSpeed: 800,
    bullets: false,
    bulletThumbs: false,
    bulletThumbLocation: '',
    afterSlideChange: function(){}
};

任何想法？

推荐答案

如此;开源代码ORBIT对象设置添加随机默认值false：

so; Open Source Code ORBIT Objects settings add random default false:

defaults: {
    animation: 'horizontal-push',
    animationSpeed: 600,              // how fast animtions are
    timer: true,                      // true or false to have the timer
    advanceSpeed: 4000,               // if timer is enabled, time between transitions
    pauseOnHover: false,              // if you hover pauses the slider
    startClockOnMouseOut: false,      // if clock should start on MouseOut
    startClockOnMouseOutAfter: 1000,
    directionalNav: true,                 // manual advancing directional navs
    captions: true,                   // do you want captions?
    captionAnimation: 'fade',             // fade, slideOpen, none
    captionAnimationSpeed: 600,       // if so how quickly should they animate in
    bullets: false,
    bulletThumbs: false,              // thumbnails for the bullets
    bulletThumbLocation: '',          // location from this file where thumbs will be
    afterSlideChange: $.noop,     // empty function
    fluid: false,
    centerBullets: true,

    /////////////////////////// add Line
    random: false, // or true
    ////////////////////////////

    },

在ORBIT对象{loaded}方法添加到if（options.random）然后随机：

after ORBIT Objects {loaded} method add to if (options.random) then Random:

loaded: function () {
    this.$element
        .addClass('orbit')
        .css({width: '1px', height: '1px'});

    this.setDimentionsFromLargestSlide();
    this.updateOptionsIfOnlyOneSlide();
    this.setupFirstSlide();

    if (this.options.timer) {
        this.setupTimer();
        this.startClock();
    }

    if (this.options.captions) {
        this.setupCaptions();
    }

    if (this.options.directionalNav) {
        this.setupDirectionalNav();
    }

    if (this.options.bullets) {
        this.setupBulletNav();
        this.setActiveBullet();
    }


  //////////////////////////////// add Line
  if (this.options.random)
      this.shift(this.Random.__init__());
  /////////////////////////////////////

},

之后;添加ORBIT对象新方法{Random}

after; add ORBIT Objects new method {Random}

    Random: {

        __init__: function() {

            return this.math();
        },

        math: function() {
            var bullets_count = (jQuery(".orbit-bullets li").length -1);

            return (Math.floor(Math.random() * (bullets_count - 0 + 1)));
        }
},

放轻松..

这篇关于jQuery Orbit - 如何制作随机幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！