how do i add a randomize function to this script?

hello, i am not a js programmer but i imagine this is simple for someone who is. I have the following script which produces a rotating banner. I would like to add a function that randomizes the order of the images every time the page refreshes.... thanks.


<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>
<script type='text/javascript'>

$(window).load(function() { //start after HTML, images have loaded


var InfiniteRotator =
{
init: function()
{
//initial fade-in time (in milliseconds)
var initialFadeIn = 500;

//interval between items (in milliseconds)
var itemInterval = 5000;

//cross-fade time (in milliseconds)
var fadeTime = 2500;

//count number of items
var numberOfItems = $('.rotating-item').length;


//set current item
var currentItem = 0;


//show first item
$('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);


//loop through the items
var infiniteLoop = setInterval(function(){
$('.rotating-item').eq(currentItem).fadeOut(fadeTime);


if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('.rotating-item').eq(currentItem).fadeIn(fadeTime);


}, itemInterval);
}
};


InfiniteRotator.init();

});






</script>

 

I haven't run this, but try it. (Add or change the red items, delete the green ones. Leave the rest of the code alone.) It will still start with the first banner, but then choose them randomly. (Remember, "random" includes the same one twice, the same sequence twice, etc. Not repeating isn't random.)

            //loop through the items 
            [COLOR=#ff0000]var cur = Math.floor((Math.random()*numberOfItems)+1);       [/COLOR]
            var infiniteLoop = setInterval(function(){
                $('.rotating-item').eq([COLOR=#ff0000]cur[/COLOR]).fadeOut(fadeTime);

                [COLOR=#008000]if(currentItem == numberOfItems -1){
                                      currentItem = 0;
                                }else{
                                      currentItem++;
                                }[/COLOR]
                [COLOR=#ff0000]cur = Math.floor((Math.random()*numberOfItems)+1);[/COLOR]      
                $('.rotating-item').eq([COLOR=#ff0000]cur[/COLOR]).fadeIn(fadeTime);


            }, itemInterval);    
        }    
    };

Code (markup):

 

Thanks for your help. It's working pretty good now with the code you supplied. Needed a couple of tweak tho...

I had to move the "var cur=..." statement so that it was the "set current item statement", I also had to take out the +1 to get it to include the first image in the rotation.

Only issue left is that every so often, it produces a blank space instead of a slide... not a big deal but I would like to fix that too if you know how.

Thanks Again, very helpful.