2012-08-29 44 views
2

我發現了一個很酷的幻燈片爲我的網站。jQuery Orbit - 如何製作隨機幻燈片?

頁面加載時,第一張圖片出現在幻燈片中。

我想幻燈片放映時隨機顯示一些圖片加載頁面。

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

任何想法?

+1

你可以創建你的圖片不是使用序列化的對象列表,並隨機對他們.. –

回答

2

所以;開放源代碼軌道上的物體設置添加隨機默認假:

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 
    //////////////////////////// 

    }, 

軌道上的物體後{}裝入的方法添加到如果(options.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__()); 
    /////////////////////////////////////         

}, 

後;添加軌道上的物體的新方法{}隨機

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

處之泰然..