2012-08-29 2 views
2

내 웹 사이트에 멋진 슬라이드 쇼를 발견했습니다.jQuery Orbit - 랜덤 슬라이드 쇼 만드는 법?

페이지가로드되면 첫 번째 사진이 슬라이드 쇼에 나타납니다.

슬라이드 쇼가 페이지를로드 할 때 일부 그림을 무작위로 표시하려고합니다.

자바 스크립트 코드 :

(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

당신이 사용하는 직렬화보다는 이미지의 대상 목록을 작성하고 그들에 무작위 수 있습니다 ..

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

쉽게 받아 새로운 방법 {랜덤} 개체 .. –

답변

2

so; 오픈 소스 코드 ORBIT이 설정은 임의 기본 거짓 추가 개체 : ORBIT 개체 후

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

}, 

후; 추가 ORBIT은