Simple changing background image slideshow

Simple changing background image slideshow

I'm just starting to use jquery in my websites, but I'm stuck on this.

The page I'm making  - www.chirho.co.uk/maggie - has a header div which is just the logo with a background image. I put a bit of php into the css so that every time the page is loaded, a random background gets loaded from a set of 7:

  1. background: #000 url(../img/back0<?php echo rand(1,7); ?>.jpg) no-repeat;

I'd like to go a step further and - using jquery - have the background image change every few seconds. Nothing fancy. Just the next image fading in to replace it.

I've found out how to use jquery to change the background image of the div, and I've started a loop:

  1. for ( var i = 1; i <= 7; i++ )
  2. $("#headerunder").css('background-image', 'url(img/back0' + i + '.jpg)');

Now I need to work out how to get this function to cycle through the 7 images, with a delay between each one and fade each new one in.

I've found a host of plug-ins that could do this, but because this is very basic, and I'm new to jquery, I'd like to try and write the function myself.

Thanks for any help