jQuery Orbit - 如何制作随机幻灯片？ [英] jQuery Orbit - How to make a Random Slideshow?

问题描述

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

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 - 如何制作随机幻灯片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！