cambiar fondo con jquery cada x segundos

edu007ar · #1 (**permalink**) 15/05/2012, 17:19

Hola gente, estuve buscando y no puedo encontrar ninguna funcion programada que se adapte a lo que quiero.

Necesito cambiar la imagen de fondo de la web (body) cada cierta cantidad de segundos o minutos, entre un listado de imagenes.

Pense en una funcion jquery que se active sola cuando la pagina carga, nada manual.

No se si alguien podrá ayudarme con esto.

Gracias!

caricatos · #2 (**permalink**) 15/05/2012, 23:25

Hola:

¿Porqué jquery y no javascript normal...?

window.onload = function() {
setInterval(cambiarFondo, 5000);// 5 segundos
}
fondoActual = 0;
imagenes = ["fondo1.jpg", "fondo2.jpg", "fondo3.jpg"];
function cambiarFondo() {
document.body.style.backgroundImage = "url(" + imagenes[++fondoActual % imagenes.length] + ")";
}

Saludos

emprear · #3 (**permalink**) 16/05/2012, 00:54

Acá te dejo una variante, similar a la de @caricatos, pero con un agregado, para evitar parpadeos durante el cambio de fondo, vamos a precargar la imagen que sigue en la secuencia, para almacenarla en cache y que ya esté disponible cuando se la necesite

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar background cada n segundos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* definimos como background por defecto la primera imagen de nuestra lista */
body {
background-image: url('sfondo01.jpg');
}
/* esta div no es visible, pero precarga la imagen siguiente a cargar por body, asi se evita algún posible parpadeo
definimos como background por defecto la 2ª imagen de nuestra lista.
Para la demo le damos un alto y ancho, pero debe establecerse a 0;
*/
div#precarga{
width: 100px;
height: 100px;
margin: 0px;
padding: 0px;
background-image: url('sfondo02.gif');
}
h1{
color: #0061C1;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
// aqui definis la lista de imágenes para el cambio automático
var fondos = ['sfondo01.jpg', 'sfondo02.gif', 'sfondo03.jpg', 'sfondo04.jpg', 'sfondo05.jpg', 'sfondo06.jpg', 'sfondo07.jpg'];
var fondo_actual = 0;
// aqui hacemos la rotación
var CambiarFondo = function(){
if (fondo_actual == fondos.length) {
fondo_actual = 0;
}
var precargar =fondo_actual++;
var precargar2 = precargar+2;
// cambiamos el background del body
document.body.style.backgroundImage = 'url('+ fondos[precargar]+ ')';
// cargamos en el div no visible "#precarga" la imagen siguiente que se cargará en el body
// para ya tenerla en la cache, comenzamos con la imagen 3, ya que la 1 y 2 las tenemos en el css
document.getElementById('precarga').style.backgroundImage =  'url('+fondos[precargar2]+ ')';
}
//aqui definís el tiempo en milisegundos e  inicias la función con setInterval para que se repita indefinidamente
window.setInterval(CambiarFondo, 10000); 
//]]>
</script>
</head>
<body>
<div id="precarga"><!-- precarga de backgrounds --></div>
<h1>Cambiar background cada n segundos</h1>
</body>
</html>

Demo
http://foros.emprear.com/javascript/...orotarbg2.html

Saludos

edu007ar · #4 (**permalink**) 16/05/2012, 18:08

Gracias por ambas respuestas!! en realidad pensé primero en jquery porque pretendia que el cambio de imagen sea con un fadein o cualquier efecto menos violento que un cambio directo (olvide comentarlo en el primer post).

Si se les ocurre como agregar algun efecto a estas funciones estare de mas agradecido. Igual algo de aqui voy a aprovechar.

Gracias!

caricatos · #5 (**permalink**) 16/05/2012, 18:46

Hola:

En principio el efecto fade no es más que un cambio de la opacidad del elemento al que se le aplique... y si se aplica al body de la página, se mostrará la página entera con el efecto... para conseguir el efecto (no importa si se usan librerías o no) habría que poner una capa encima del body con los estilos adecuados para poder aplicar el efecto... dudo de que las librerías te ayuden, pero moveremos el tema para ver si te pueden ayudar...

Saludos

Naahuel · #6 (**permalink**) 16/05/2012, 21:44

Podrías hacer algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cambio de fondo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="fondo_imagenes.js" type="text/javascript"></script>
<link rel="stylesheet" href="estilos.css" />
 
</head>
<body>
    <div id="fondo-imagenes">
        <img src="http://placekitten.com/1200/800" />
        <img src="http://placebear.com/1200/800" />
        <img src="http://placedog.com/1200/800" />
    </div>
    <div id="wrap-contenido">
        <!-- contenido de ejemplo -->
        <h1>Mi p&aacute;gina</h1>
        <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
        <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
        <p>Lorem ipsum dolor sit amet, ephesiorum quod non dum veniens indica enim materiam ad quia. Testare in modo invenit iuvenem patre nihil labore in lucem concitaverunt in. Famulus prope sola habiturus in modo invenit. Neminem habere matrem vel regio hinc Agimus nolo accipies, nescimus de me missam canticis in rei finibus veteres hoc. Africus hortamento laetus moritur ad nomine Stranguillio in, x domum sum ad te sed quod eam est cum!</p>
        <!-- contenido de ejemplo -->
    </div>
</body>
</html>

Código CSS:

Ver originalbody, html{
    /* pequeño reset, ignorar */
    margin:0;
    padding:0;
}
 
/* Posicionamiento de los elementos */
#fondo-imagenes, #fondo-imagenes img{
    position: absolute;
    left:0;
    top: 0;
    width: 100%;
    z-index: 1; /* posicionar debajo del contenido */
}
 
/* posicionamiento del contenido */
#wrap-contenido{
    /* IMPORTANTE, posicionar encima de las imagenes */
        position: relative;
        z-index: 10;
        
    /* Ignorar, estilos de ejemplo */
    width: 960px;
    margin: 0 auto;
    padding: 30px 20px;
    background: rgba(0,0,0,0.6);
    color: #eee;
    border: 8px solid rgba(255,255,255,0.2);
    border-top: 0;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.3);
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

Código Javascript:

Ver original$(window).load(function(){
    // Lista de imagenes
    var $_imagenes = $('#fondo-imagenes img');
    var i_cantidad_img = $_imagenes.length;
    var i_iniciar_en = 0;           //Indice de imagen en cual iniciar
    var i_tiempo = 4000;            //Intervalo de tiempo
    var i_duracion = 700;           //Duración de la animación
    var s_animacion = 'fadeToggle'; //Animacion a usar
    var s_claseactiva = 'img_activa' //Clase de la imagen activa
    
    // Oculto todas las imagenes inicialmente
    $_imagenes.hide();
    
    // Muestro la primer imagen
    $_imagenes.eq(i_iniciar_en)[s_animacion](i_duracion).addClass(s_claseactiva);
    
    // Muestro la primera
    setInterval(function(){
        i_iniciar_en = i_iniciar_en+1>=i_cantidad_img?0:i_iniciar_en+1;     //Incremento indice de imagen activa
        $('.' + s_claseactiva)[s_animacion](i_duracion).removeClass(s_claseactiva); //Oculto imagen actualmente activa
        $_imagenes.eq(i_iniciar_en)[s_animacion](i_duracion).addClass(s_claseactiva);   //Muestro siguiente imagen
    },i_tiempo);
});

Demo funcionando: ~~http://jsbin.com/efosaw~~

Tené en cuenta que es sólo un demo que hice en unos minutos. Hay algunas cosas a considerar:

Las imagenes deberian tener un min-width igual al contenedor gneral, cosa que no se achiquen mucho al redimensionar la ventana debajo del ancho del contenedor del contenido.
Hay que solucionar mediante CSS el hecho que la imagen de fondo te estira la pantalla, siendo que no hay más contenido debajo. Esto se puede, hay que buscar y probar, no tengo ganas.
El HTML no es muy semántico, pues esas imágenes son puramente decorativas y no tienen nada que hacer ahí. Sería menos incorrecto insertar el contenedor de las imágenes con el mismo script, para que no esten en el HTML.
etc.

- Edit-

Por algún motivo el demo de JSBin se clava en la segunda imagen. No tira error ni nada... En fin, acá funciona bien:
http://dl.dropbox.com/u/48567662/sit...out/index.html

edu007ar · #7 (**permalink**) 19/05/2012, 16:09

Naahuel! muy bueno el codigo

, seguramente lo voy a usar con algunas modificaciones.

Gracias!!

engonga · #8 (**permalink**) 09/08/2012, 15:42

hola!!!

este hilo es muy bueno y estaba buscando algo parecido

pero lo que no encuentro es que simplemente me tarde unos segundos en cargar el fondo de la pagina y se cargue haciendo un fade

creo que retocando el codigo conseguiré lo que me propongo

avisenme si tienen otro metodo

lrivas106 · #9 (**permalink**) 09/07/2014, 12:09

Definitivamente Jquery nos facilita mucho las cosas Naahuel, gracias me sirvio bastante tu ejemplo!