javascript - js / jquery: How to randomize images -
i have script replaces image every time countdown reaches 0. although wondering if possible, , how, these images (i have listed in order) randomize each time page refreshed ect.
here of code (the images located before " // fill in images in array"):
<div id="counter_2" class="counter"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> <!-- ready() function force browser run wait running javascript until entire page has loaded --> $(document).ready(function() { // jquery code constructing , starting counter // has been wrapped inside function can call whenever want function startcounter(imageloader){ $('#counter_2').countdown({ image: 'img/digits.png', starttime: '00:10', timerend: function(){ callback(imageloader) }, format: 'mm:ss' }) } // takes care of whatever need done everytime function callback(imageloader){ // replace image $('#image').attr('src', imageloader.nextimage()); $('#counter_2').empty(); // clear finished counter, new can constructed in place startcounter(imageloader); // construct new counter , starts } function imageloader(images){ this.images = images; this.current = 0; this.nextimage = function(){ this.current = (this.current+1) % this.images.length; return this.images[this.current];; } } // fill in images in array imageloader = new imageloader(['img/wallpapers/2.jpg', 'img/wallpapers/3.jpg', 'img/wallpapers/4.jpg', 'img/wallpapers/5.jpg', 'img/wallpapers/6.jpg', 'img/wallpapers/7.jpg', 'img/wallpapers/9.jpg', 'img/wallpapers/10.jpg', 'img/wallpapers/11.jpg', 'img/wallpapers/12.jpg', 'img/wallpapers/13.jpg', 'img/wallpapers/14.jpg', 'img/wallpapers/15.jpg', 'img/wallpapers/16.jpg', 'img/wallpapers/17.jpg', 'img/wallpapers/18.jpg', 'img/wallpapers/19.jpg', 'img/wallpapers/20.jpg', 'img/wallpapers/21.jpg', 'img/wallpapers/22.jpg', 'img/wallpapers/23.jpg', 'img/wallpapers/24.jpg', 'img/wallpapers/25.jpg', 'img/wallpapers/26.jpg', 'img/wallpapers/27.jpg', 'img/wallpapers/28.jpg', 'img/wallpapers/29.jpg', 'img/wallpapers/30.jpg', 'img/wallpapers/31.jpg', 'img/wallpapers/32.jpg', 'img/wallpapers/33.jpg', 'img/wallpapers/34.jpg', 'img/wallpapers/35.jpg', 'img/wallpapers/36.jpg', 'img/wallpapers/37.jpg', 'img/wallpapers/38.jpg', 'img/wallpapers/39.jpg', 'img/wallpapers/40.jpg', 'img/wallpapers/41.jpg']); startcounter(imageloader); // set off! (construct new counter , starts it) }); </script> <div id="middle_wallpaper-actual"> <img id="image" src="img/wallpapers/1.jpg" alt="wallpapers"> </div>
you can use math.random function generate random numbers. instance, generate random numbers between 0 , 9, can following:
var num = math.floor(math.random() * 10);
i have implemented imageloader return random images , never return same images until been shown.
function imageloader(images) { this.images = images; this.usedindexes = {}; this.displayedcount = 0; } imageloader.prototype.nextimage = function () { var self = this, len = self.images.length, usedindexes = self.usedindexes, lastbatchindex = self.lastbatchindex, denylastbatchindex = self.displayedcount !== len - 1, index; if (this.displayedcount === len) { lastbatchindex = self.lastbatchindex = self.lastindex; usedindexes = self.usedindexes = {}; self.displayedcount = 0; } { index = math.floor(math.random() * len); } while (usedindexes[index] || (lastbatchindex === index && denylastbatchindex)); self.displayedcount++; usedindexes[self.lastindex = index] = true; return self.images[index]; };
Comments
Post a Comment