Автоматическая смена фоновой картинки

Здравствуйте!

Есть блок, отвечающий за вывод фона.

<div id="bg">
...
</div>

Есть несколько фоновых изображений.

Нужно чтобы у этого блока автоматически менялись фоновые изображения.

Например чтобы через каждые 10 секунд данному блоку присваивался определенный класс (тем самым меняя фоновую картинку):

<div id="bg" class="img1"></div>

class="img1" - 1 изображение,

class="img2" - 2 изображение,

class="img3" - 3 изображение,

Фоновые изображения залиты горизонтально по центру, к верхнему краю.

.img1 {background: url('images/img1.jpg') center 0 no-repeat;}
.img2 {background: url('images/img2.jpg') center 0 no-repeat;}
.img3 {background: url('images/img3.jpg') center 0 no-repeat;}

Собственно в этом и вопрос: как сделать так чтобы через заданный интервал времени эти самые классы у блока #bg менялись. Желательно чтобы это было при помощи эффекта fade.

Заранее благодарю за ответы.