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

【问题标题】：jQuery Orbit - How to make a Random Slideshow?jQuery Orbit - 如何制作随机幻灯片？
【发布时间】：2012-08-24 01:34:00
【问题描述】：

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

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

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

Javascript 代码：

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

有什么想法吗？

【问题讨论】：

您可以创建图像的对象列表，而不是对它们使用序列化和随机化..

标签： javascript jquery random slideshow

【解决方案1】：

所以;开源代码ORBIT对象设置添加随机默认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 Objects {loaded} 方法之后添加到 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}

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

放轻松..

【讨论】：