Random Background na DIV

[Caio Guimos]

Olá, pessoal! Boa tarde!

Será que alguém pode me ajudar. Esse código está me matando.

Eu tenho um "Slider" e este, é possui um background fixo definido no CSS.

Bem, a cada vez que rola o tópico do Slider, a imagem de fundo,claro, continua a mesma.

Eu queria que essa imagem do BG, fosse alterada a cada vez que rolasse o tópico no faded.

Eu cheguei a fazer um "gatilho" aqui, que a imagem é trocada. Mas isso só ocorre, quando eu atualizo a página. Ou seja a imagem não corre junto com os tópicos dos slides.

Segue abaixo o script anterior (com imagem estática).

<script type="text/javascript">
$(function () {
    $("#faded").faded({
        speed: 500,
        crossfade: true,
        autoplay: 10000,
        autopagination: false
    });
    $('#domain-form').jqTransform({
        imgPath: 'images/'
    });
});
</script>

E agora, o script com a alteração que fiz. (onde a imagem do bg é alterada com atualização da página.

<script type="text/javascript">
$(function () {
var imgCount = 4;
        var dir = 'images/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array
                images[1] = "slider-bg.jpg",
                images[2] = "slider-bg2.jpg",
                images[3] = "slider-bg.jpg",
                images[4] = "slider-bg2.jpg",
        document.getElementById("faded").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
    $("#faded").faded({
        speed: 500,
        crossfade: true,
        autoplay: 10000,
        autopagination: false
    });
    $('#domain-form').jqTransform({
        imgPath: 'images/'
    });
});
</script>

Agora, o css, onde comentei a linha do bg.

#faded {
width:990px;
height:350px;
margin:7px 0;
/*background:url(../images/slider-bg.jpg) no-repeat 25px 5px;*/
}

E por último, a div em questão. Onde rola o slide.

<div id="faded">
        <ul class="slides">
          <li><img src="images/slide-title1.gif"><a href="#"><span><span>Saiba Mais</span></span></a></li>
          <li><img src="images/slide-title4.gif"><a href="#"><span><span>Saiba Mais</span></span></a></li>
          <li><img src="images/slide-title3.gif"><a href="http://localhost/guimoshost/lojasvirtuais.php" target="_parent"><span><span>Saiba Mais</span></span></a></li>
          <li><img src="images/slide-title2.gif"><a href="#"><span><span>Saiba Mais</span></span></a></li>
        </ul>
        <ul class="pagination">
          <li><a href="#" rel="0"><span>Hospedagem</span><small>Obtenha mais informações</small></a></li>
          <li><a href="#" rel="1"><span>Cloud Server</span><small>Obtenha mais informações</small></a></li>
          <li><a href="#" rel="2"><span>Loja Virtual</span><small>Obtenha mais informações</small></a></li>
          <li><a href="#" rel="3"><span>Revenda</span><small>Obtenha mais informações</small></a></li>
        </ul>
      </div>

Eu gostaria de saber, como faço para que a imagem do BG continue sendo alterada, mas naquele mesmo tempo de mudança do slide e não toda vez que atualizo a página.

Desde já agradeço pela atenção e colaboração de todos vocês.