js / jquery: How to randomize images

Question

I have a script that replaces an image every time the countdown reaches 0. Although I was wondering if it was possible, and how, I could get these images (I have simply just listed in order) to randomize each time the page is refreshed ect.

Here is all of the code (the images are located before " // Fill in images in this 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">
        <!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
        $(document).ready(function() {
        // The jquery code for constructing and starting the counter
        // has been wrapped inside a function so we can call it whenever we want to
        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 to be done everytime
        function callback(imageLoader){
            // Replace image
            $('#image').attr('src', imageLoader.nextImage());
            $('#counter_2').empty(); // Clear the finished counter, so a new can be constructed in its place
            startCounter(imageLoader); // Construct a new counter and starts it
        }
        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 this 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 everything off! (Construct a new counter and starts it)
        });       
    </script>
<div id="middle_wallpaper-actual">              
            <img id="image" src="img/wallpapers/1.jpg" alt="wallpapers">                
          </div>

Answer 1

You can use the Math.random function to generate random numbers. For instance, to generate random numbers between 0 and 9, you can do the following:

var num = Math.floor(Math.random() * 10);

I have implemented an ImageLoader that will return random images and will never return the same images until they all been shown.

http://jsfiddle.net/dUZSZ/2/

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

    do {
        index = Math.floor(Math.random() * len);
    } while (usedIndexes[index] || (lastBatchIndex === index && denyLastBatchIndex));

    self.displayedCount++;
    usedIndexes[self.lastIndex = index] = true;

    return self.images[index];
};

Answer 2

Replace

this.current = (this.current+1) % this.images.length;

with

this.current = Math.floor(Math.random() * this.images.length);