Problema con Javascript para cambiar fondo web automaticamente

[phercin]

Hola, tengo el siguiente codigo en mi pagina web, el problema es que no se que hice mal, porque no funciona, se queda cargando la web y no muestra el fondo en la pagina, alguien me podría ayudar? muchas gracias....

Código:

<style type="text/css">
<!--
body,td,th {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	
	background-attachment: fixed;	
}
a:link {
	text-decoration: none;
	color: #999999;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style2 {
	font-size: 50px
}
.style3 {
	color: #1E1E1E;
	font-weight: bold;
}
.style4 {
	color: #666666;
	font-weight: bold;
}
.style6 {font-size: 24px}
.style7 {color: #999999}
.style8 {
	font-size: 24px;
	color: #000000;
	font-weight: bold;
}
-->
</style>
<script type="text/javascript">
$( function(){
* * var arrImagenes = [ '1.jpg','2.jpg', '3.jpg', '4.jpg' ];
* * var imagenActual = '1.jpg';
* * var tiempo = 3000;
* * var id_contenedor = 'main-wrap'
* * setInterval( function(){
* * * * do{
* * * * * * var randImage = arrImagenes[Math.ceil(Math.random()*(arrImagenes.length-1))];
* * * * }while( randImage == imagenActual )
* * * * imagenActual = randImage;
* * * * cambiarImagenFondo(imagenActual, id_contenedor);
* * }, tiempo)
})
*
function cambiarImagenFondo(nuevaImagen, contenedor){
* * var contenedor = $('#' + contenedor);
* * //cargar imagen primero
* * var tempImagen = new Image();
* * $(tempImagen).load( function(){
* * * * contenedor.css('backgroundImage', 'url('+tempImagen.src+')');
* * });
* * tempImagen.src = 'images/' + nuevaImagen;
}
</script>

[dual3nigma]

Hola phercin

Podría probar reestructurar tu código así, es más claro y más ordenado:

Código Javascript:

jQuery(function ($) {
    var arrImagenes = [ '1.jpg','2.jpg', '3.jpg', '4.jpg' ],
        actual = 0,
        rand = actual,
        delay = 3000,
        $contenedor = $('#main-wrap');
        
    +function () {
        
        do {
            rand = Math.ceil(Math.random()*(arrImagenes.length-1));
        } while(rand == actual);
        
        actual = rand;
        
        var img = new Image();
        img.onload = function () {
            $contenedor.css('background-image', 'url('+img.src+')');
        };
        
        img.src = 'images/'+arrImagenes[actual];
        
        setTimeout(arguments.callee, delay);
    }();
});
 

[phercin]

Gracias por tu ayuda... ya tengo en mi index esto:

Código:

<link href="contenedor.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
jQuery(function ($) {
* * var arrImagenes = [ '1.jpg','2.jpg', '3.jpg', '4.jpg' ],
* * * * actual = 0,
* * * * rand = actual,
* * * * delay = 3000,
* * * * $contenedor = $('#main-wrap');
* * * * 
* * +function () {
* * * * 
* * * * do {
* * * * * * rand = Math.ceil(Math.random()*(arrImagenes.length-1));
* * * * } while(rand == actual);
* * * * 
* * * * actual = rand;
* * * * 
* * * * var img = new Image();
* * * * img.onload = function () {
* * * * * * $contenedor.css('background-image', 'url('+img.src+')');
* * * * };
* * * * 
* * * * img.src = 'images/'+arrImagenes[actual];
* * * * 
* * * * setTimeout(arguments.callee, delay);
* * }();
});

</script>

y en contenedor.css esto:

Código:

@charset "utf-8";
/* CSS Document */

body,td,th {
	color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-image: url(images);
	background-attachment: fixed;	
}
a:link {
	text-decoration: none;
	color: #999999;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.style2 {
	font-size: 50px
}
.style3 {
	color: #1E1E1E;
	font-weight: bold;
}
.style4 {
	color: #666666;
	font-weight: bold;
}
.style6 {font-size: 24px}
.style7 {color: #999999}
.style8 {
	font-size: 24px;
	color: #000000;
	font-weight: bold;
}

y aun no me funciona,,, que estará mal? :D gracias por tu ayuda...