Ver Mensaje Individual
  #1 (permalink)  
Antiguo 13/05/2013, 11:23
komoons
 
Fecha de Ingreso: mayo-2013
Ubicación: ECUADOR
Mensajes: 5
Antigüedad: 11 años
Puntos: 0
cambiar imagen de fondo por una lista aleatoria.

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.