cambiar imagen de fondo por una lista aleatoria.

[komoons]

Código HTML:

  //cambiar imagen de fondo por una lista aleatoria.
    //Nahuel Jose
    $( function(){
        var arrImagenes = [ 'fondo-1.jpg','fondo-1.jpg', 'fondo-2.jpg', 'fondo-3.jpg' ];
        var imagenActual = 'fondo-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;
    }

EN EL CODIGO QUISIERA QUE EL CAMBIO DE IMAGEN SEA MAS SUAVE ASIMILANDO UNA TRANSICION PARECIDA AL DE ESTE SITIO:
[URL="http://komoons.zz.mu"]CLIC AQUI[/URL]


NOTA: EL CODIGO HACE QUE LA PROPIEDAD BACKGROUND-IMAGE CAMBIE CADA CIERTO TIEMPO.

[maycolalvarez]

porque puede que utilice CSS3 transitions, consulte sobre ello.

[komoons]

Ya lo consulte no solo usa scrip... ushhh rayos y alguna sugerencia de codigo que me permita hacer lo mismo del codigo...! escuche algo como setTimeout.... me dijieron que puede hacer transiciones... sera? que dicen

[ggomez91]

podrías tener dos fondos, el de atrás muestra la imagen actual y uno en frente con la siguiente imagen pero contransparencia y con jquery animate() hacer fade de la opacidad del frontal hasta ser totalmente opaco, luego pones la misma imagen atras y regresas el frontal a transparente, eso lograría el fade.