Hacer que el background cambie la imagen cada cierto tiempo

[fana21]

Buenas...

He leído ya varios temas con lo que pregunto, pero la verdad es que no lo logro... jajaja...

Estoy haciendo una page agrícola y el fondo son imágenes grandes, el cliente quiere que esa imagen cambie, tengo tres imágenes.

Cómo hago para que esa imagen que uso como background cambie?

Estoy trabajando en dreamweaver y con css.
Cuál sería el código que debo usar y en donde lo pongo?

Gracias!

[maycolalvarez]

depende de como quieres el cambio:

¿que cambie el fondo cada vez que entra a la pagina?: se puede hacer con un script del lado del servidor, con javascript tambien.

¿que cambie el fondo cada x segundos?: necesitas declarar un array en javascript con las rutas de las imágenes y usar setInterval para asignar una función que cambie el fondo.

[caricatos]

Tema movido desde Web general

[fana21]

Iniciado por maycolalvarez

depende de como quieres el cambio:

¿que cambie el fondo cada vez que entra a la pagina?: se puede hacer con un script del lado del servidor, con javascript tambien.

¿que cambie el fondo cada x segundos?: necesitas declarar un array en javascript con las rutas de las imágenes y usar setInterval para asignar una función que cambie el fondo.

Cada cierto TIEMPO... o sea, cada no sé, 30 segundos.

[Naahuel]

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:

//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;
}
 

[fana21]

Naahuel, eso es lo que yo necesito!!!
GRACIAS!!!

Pero una pregunta mas... donde meto ese codigo?, en que parte del código HTML meto eso?

[Naahuel]

Iniciado por fana21

Naahuel, eso es lo que yo necesito!!!
GRACIAS!!!

Pero una pregunta mas... donde meto ese codigo?, en que parte del código HTML meto eso?

Pues yo lo hice así: Primero incluímos jQuery desde los repos de Google y luego el archivo con nuestro script:

Código HTML:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js'></script> 
<script type="text/javascript" src="js/cambiar-fondo.js"></script>
 

En mi caso le llamé cambiar-fondo.js en una carpeta js. Tenés que modificar el script con tus parámetros. Te explico más o menos:

La matriz arrImagenes contiene los nombres de las imágenes que quieres.
imagenActual es el nombre de la imagen con que inicias.
tiempo es el tiempo en milisegundos de los intervalos de cambio.
id_contenedor es el id del elemento al que quieres cambiarle el fondo.

Y debes reemplazar la línea:

Código Javascript:

tempImagen.src = 'images/' + nuevaImagen;
 

Con la ruta al directorio donde se encuentran tus imágenes. En mi caso es images pero si vos tuvieses "fotos" por ejemplo, sería:

Código Javascript:

tempImagen.src = 'fotos/' + nuevaImagen;
 

Más claro que eso no puedo :P

Sólo tenés que tener cuidado con las rutas, a veces dan dolores de cabeza. Fijate bien dónde tenés tu HTML, tus imágenes y cuidado con las rutas relativas.

[engonga]

que bueno

yo estoy intentando que el cambio lo haga más suave... tipo fade... pero ya no se que tocar...

[_cronos2]

Iniciado por Naahuel

Código Javascript:

//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;
}
 

Muy bueno el script, puedes hacer esto para evitar el do while:

Código Javascript:

Array.prototype.noRepetir = function(){
  this.esNuevo = this.esNuevo == null;
  this.copia = this.esNuevo || !this.copia.length ? this.concat() : this.copia;
  return this.copia.splice(Math.floor(Math.random() * this.copia.length), 1); 
}
var arr = [2, 'abc', false, [], 'def', {}, true];
for(i = 0; i<14; i++) document.write(arr.noRepetir()+'<br>');
 

Saludos (:

[Naahuel]

Iniciado por _cronos2

Muy bueno el script, puedes hacer esto para evitar el do while:

Código Javascript:

Array.prototype.noRepetir = function(){
  this.esNuevo = this.esNuevo == null;
  this.copia = this.esNuevo || !this.copia.length ? this.concat() : this.copia;
  return this.copia.splice(Math.floor(Math.random() * this.copia.length), 1); 
}
var arr = [2, 'abc', false, [], 'def', {}, true];
for(i = 0; i<14; i++) document.write(arr.noRepetir()+'<br>');
 

Saludos (:

Excelente, eso mejora el rendimiento considerablemente.
Puse este script en mi blog personal, con una alternativa que varía en orden y no aleatoriamente, por si a alguien le interesa:

[URL]http://nahueljose.com.ar/articles/cambiar-o-rotar-la-imagen-de-fondo-de-un-contenedor-con-jquery/[/URL]

[_cronos2]

Al usar Math.ceil la primera imagen sólo sale al principio, usa mejor Math.round o Math.floor. Y no sé si mejora el rendimiento pero a mí me parece más legible
Saludos (:

[caricatos]

Hola:

Iniciado por Naahuel

[URL]http://nahueljose.com.ar/articles/cambiar-o-rotar-la-imagen-de-fondo-de-un-contenedor-con-jquery/[/URL]

Lo que no termino de comprender es ¿Qué tiene que ver jquery con esto...

¡Qué manía con las librerías...!

Saludos

[Naahuel]

Iniciado por caricatos

Hola:



Lo que no termino de comprender es ¿Qué tiene que ver jquery con esto...

¡Qué manía con las librerías...!

Saludos

Yo tengo una obsesión muy insalubre con jQuery. En ese caso sólo lo utilizo en un par de líneas y puede escribirse fácilmente un equivalente en JavaScript nativo :P No sé, se me hizo más fácil y más rápido de hacer con un par de líneas e jQuery.

[caricatos]

Iniciado por Naahuel

Yo tengo una obsesión muy insalubre con jQuery. En ese caso sólo lo utilizo en un par de líneas y puede escribirse fácilmente un equivalente en JavaScript nativo :P No sé, se me hizo más fácil y más rápido de hacer con un par de líneas e jQuery.

Es una pena que tengas ese vicio, porque en cosas tan simples, cargar toda una librería es sencillamente absurdo (no lo tomes mal)

Saludos

[Naahuel]

Iniciado por caricatos

Es una pena que tengas ese vicio, porque en cosas tan simples, cargar toda una librería es sencillamente absurdo (no lo tomes mal)

Saludos

No, ¡por supuesto! Estoy totalmente de acuerdo. Mi problema viene de varias frutraciones en el pasado luego de fracasar en hacer que códigos simples funcionen correctamente en todos los navegadores. Cuando descubrí jQuery alguien ya se había tomado ese trabajo por mi :P

Aunque me has hecho dar cuenta de que por lo menos en este caso en particular, se puede hacer volar jQuery.

[fana21]

Yo debo confesar que aún no logro hacer que funcione eso en la página que necesito hacer :-/

[Naahuel]

A lo mejor si nos muestras tu código :P

[engonga]

encontre una cosita


http://www.marcofolio.net/webdesign/...slideshow.html

espero que les guste a mi me funcionó.

[Aniwizz]

Iniciado por Naahuel

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:

//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;
}
 

Naahuel... estoy intentando implementar tu código en un sitio que debo hacer para la universidad... quiero implementarlo pero no para el back ground, sino que para la imagen central del sitio

el tema es que tengo implementado ya el JS... pero nunca habia llamado una funcion en una imagen xD

asi es como tengo puesta la imagen estatica en el sitio en estos momentos

Código HTML:

<div id="content">
    <h2><a href="#">Bienvenidos a FloreXpress </a></h2>
        <div class="entry">
            <p><img src="images/flores-1.jpg" width="690" height="200"
            alt="" /></p>
            <p>Esto es <strong>FloreXpress </strong> una tienda virtual
            dedicada a la venta de ramos de flores y arreglos florales para
            cualquier ocasion.
            ¿Planeas un matrimonio? ¿Estas de aniversario? ¿Quieres que te
                    perdonen? O tan solo deseas regalonear a la persona que amas?
            </p>
        </div>
</div>
 

[IsaBelM]

prueba con este

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#img1 {
width: 900px;
height: 350px;
position: absolute;
opacity: 0;
filter: alfa(opacity=0);
}

#img2 {
width: 900px;
height: 350px;
position: absolute;
opacity: 0;
filter: alfa(opacity=0);
}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, contadorImg = 0, estaImg, contador = 0, objImg1, objImg2;

window.onload = function(){
var arrImagenes = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];

nImg = arrImagenes.length;
if(typeof(arrImagenes) === 'undefined' || nImg < 2){
alert('error con imágenes')
return false;
}



//precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}
//precarga




objImg1 = creaImg(objImg1, imagenes[0]);
objImg2 = creaImg(objImg2, imagenes[1]);
var cont = document.getElementById('contenedor');
cont.appendChild(objImg1);
cont.appendChild(objImg2);
IMG1 = document.getElementById('img1');
IMG2 = document.getElementById('img2');
fadeIn(1, 0);
}



function creaImg(obj, img){
obj = document.createElement('img');
obj.id = (contadorImg == 0) ? 'img1' : 'img2';
contadorImg++;
return obj;
}



function fadeIn(kImg, transp){
estaImg = (kImg == 1) ? IMG1 : IMG2;

if(transp==0){
estaImg.src = imagenes[contador++ % nImg].src;
}

estaImg.style.opacity = transp/100;
estaImg.style.filter = 'alpha(opacity =' + transp + ')';
transp = transp + 2.5;
var intervalo = setTimeout(function() {fadeIn(kImg, transp)}, 60);

if(transp >= 100){
clearTimeout(intervalo);
setTimeout(function() {rotarImgs(kImg)}, 1000);
}
}



function rotarImgs(pos){
IMG1.style.zIndex = Math.abs(pos-1);
IMG2.style.zIndex = pos;
pos = (pos == 0) ? 1 : 0;
fadeIn(pos, 0);
}
</script>
</head>
<body>

<div id="content">
<h2><a href="#">Bienvenidos a FloreXpress </a></h2>
<div class="entry">
<div id="contenedor"></div>
<p>Esto es <strong>FloreXpress </strong> una tienda virtual
dedicada a la venta de ramos de flores y arreglos florales para
cualquier ocasion.
¿Planeas un matrimonio? ¿Estas de aniversario? ¿Quieres que te
perdonen? O tan solo deseas regalonear a la persona que amas?
</p>
</div>
</div>

</body>
</html>

[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;
    }

ok ESTA BIEN LO ENTIENDO PERO SI QUISIERA QUE EL CAMBIO DE IMAGEN NO SEA BRUSCO Y SEA COMO UNA TRANSCION PARECIDA A LA DE ESTA WEB MIREN:
[URL="http://komoons.zz.mu/"]clic aqui[/URL]

[patilanz]

Iniciado por _cronos2

Código Javascript:

Array.prototype.noRepetir = function(){
  this.esNuevo = this.esNuevo == null;
  this.copia = this.esNuevo || !this.copia.length ? this.concat() : this.copia;
  return this.copia.splice(Math.floor(Math.random() * this.copia.length), 1); 
}
var arr = [2, 'abc', false, [], 'def', {}, true];
for(i = 0; i<14; i++) document.write(arr.noRepetir()+'<br>');
 

Saludos (:

Hola me puedes explicar algo ya que entendí la parte de array.prototype pero que hace este for?

Código Javascript:

var arr = [2, 'abc', false, [], 'def', {}, true];
for(i = 0; i<14; i++) document.write(arr.noRepetir()+'<br>');
 

Saludos