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(){} };
有任何想法吗 ?
所以; 开源代码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)然后随机:
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))); } },
别紧张..