I recently asked how to rotate images on an element and was presented with this code - which worked perfectly:
counter = 1;
num_images = 9;
dir = "URL TO IMAGE DIRECTORY";
function rotateImage() {
var background_img = 'url(' + dir + '/image' + counter + '.gif)';
jQuery('#fader.category').fadeOut(function() {
jQuery('#fader.category').css('background-image', background_img).fadeIn('slow');
});
counter++; if (counter > num_images) counter = 1;
}
setInterval( "rotateImage()", 25000 );
My question now is: How do I adapt this same code to make the images change on refreshing a page? I'm new to jQuery and Javascript in general so if someone provides a solution please explain how it works so I can learn and hopefully ask less questions later... Thanks so much