Ver Mensaje Individual
  #5 (permalink)  
Antiguo 16/03/2011, 08:41
Avatar de Naahuel
Naahuel
 
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años, 9 meses
Puntos: 192
Respuesta: Hacer que el background cambie la imagen cada cierto tiempo

Hace muy poco hice un script para un sitio de un cliente. Acá podés verlo:

http://www.cofatuc.org.ar/olimpiadas2011/

Verás que el fondo cambia aleatoriamente cada 3 segundos. Acá tenés el script:

http://www.cofatuc.org.ar/olimpiadas2011/js/cambiar-fondo.js
Código Javascript:
Ver original
  1. //cambiar imagen de fondo por una lista aleatoria.
  2. //Nahuel Jose
  3. $( function(){
  4.     var arrImagenes = [ 'fondo-1.jpg','fondo-1.jpg', 'fondo-2.jpg', 'fondo-3.jpg' ];
  5.     var imagenActual = 'fondo-1.jpg';
  6.     var tiempo = 3000;
  7.     var id_contenedor = 'main-wrap'
  8.     setInterval( function(){
  9.         do{
  10.             var randImage = arrImagenes[Math.ceil(Math.random()*(arrImagenes.length-1))];
  11.         }while( randImage == imagenActual )
  12.         imagenActual = randImage;
  13.         cambiarImagenFondo(imagenActual, id_contenedor);
  14.     }, tiempo)
  15. })
  16.  
  17. function cambiarImagenFondo(nuevaImagen, contenedor){
  18.     var contenedor = $('#' + contenedor);
  19.     //cargar imagen primero
  20.     var tempImagen = new Image();
  21.     $(tempImagen).load( function(){
  22.         contenedor.css('backgroundImage', 'url('+tempImagen.src+')');
  23.     });
  24.     tempImagen.src = 'images/' + nuevaImagen;
  25. }