image
Inicio » Foros » HTML

Foro sobre HTML

Cambiar imagen de fondo cada 5 segundos

Volver al foro | Tema cerrado | Añadir nuevo tema


De: Mario
Fecha: 18/09/2007
Mensaje:

Hola me gustaria que en mi página web la imagen de fondo se cambiara cada 5 segundos, ¿es posible?, si lo es ¿cual sería el código? Muchas gracias Saludos Mario


Quizás le interese
De: ZeroKilled
Util para: 117 personas

Fecha: 18/09/2007
Mensaje:

es posible con javascript, html solo no te sirve para nada. la solucion consiste en dos partes: declaracion de imagenes o extraccion de imagenes, y cambio de propiedad de fondo por la nueva imagen. en la primera parte es donde mas variacion de codigo puede haber, desde lo mas sencillo hasta lo mas complicado. puesto que el tema aparece en el foro html asumo que no tienes conocimiento de javascript, por tanto para proposito de este ejemplo lo voy hacer lo mas sencillo posible. en la primera parte voy a definir lo que se conoce como un array. este array contrendra las direcciones de todas las imagenes que quieras usar en en fondo:

//nota: todo codigo que mostrare deben ir entre las etiquetas script
img = new Array();
img.push('/mi_fondo.jpg');
img.push('www.fondos.com/muestra.gif');
img.push('/fondos/fondo01.jpg');

hasta aqui solo he definido tres imagenes. fijate que las direcciones son tanto absolutas como relativas. el numero de imagenes que quieras agregar no tiene limite. simplemente fijate que hay un patron repetitivo de img.push('...') donde la direccion va donde aparecen los tres puntos. tienes que asegurarte de usar las comillas porque de lo contrario provocara errores. la segunda parte del codigo va justo seguido de img.push y se trata de una funcion que se encarga de cambiar el fondo cada 5 segundos:

index = 0;
function altBg(){
document.body.style.backgroundImage = 'url(' + img[index % img.length] + ')';
index++;
}
window.onload = function(){
setInterval('altBg()', 5000);
// 5000 milisegundos equivalente a 5 segundos;
};

esta segunda parte te recomiendo que no la toques salvo el numero de segundos a transcurrir de un cambio a otro. el codigo hara una iteracion una y otra vez. una iteracion es una repeticion, o como comunmente se le conoce un bucle o loop. cuando el codigo muestra la ultima imagen vuelve al primero y continua asi mientras la pagina dure en el navegador. por ultimo, el codigo tomara accion solo cuando el documento web termine de cargar en el navegador. es decir, si tu documento tarda 10 segundos en un usuario, 10 segundos tiene que esperar para poder ver el efecto del fondo. tambien se discreto en el tamaño de las imagenes de fondo ya que el tiempo de rotacion es muy corto de modo que no tendras un buen resultado si las imagenes no terminan de cargar cuando se solicitan. y ultima consideracion, el codigo puedes incluirlo tanto en el body como en el head aunque muchos prefieren agregarlo en el head. no olvides que el codigo va dentro de las etiquetas script



De: Mario
Util para: 5 personas

Fecha: 18/09/2007
Mensaje:

Ok muchas gracias. Un saludo Mario



De: german
Util para: 10 personas

Fecha: 19/09/2007
Mensaje:

si manejo algun archivo css alli es donde lo tengo que poner???




De: Stefan
Util para: 16 personas

Fecha: 28/11/2007
Mensaje:

Si lo que interesa es cambiar la imagen cada 5seg. Se practico, ponle un gif animado de fondo, con frames de 5seg, eso!



De: pedro
Util para: 11 personas

Fecha: 26/02/2009
Mensaje:

Encontre la solución: 5 segundos no es suficiente para cargar completamente la pagina. Al poner 45 segundos el efecto funciona perfecto. Gracias maestro!



De: <KuâdmaiR>
Util para: 1 personas

Fecha: 22/03/2009
Mensaje:

Esto, no soy un pro haciendo webs, pero,,, -no has probado poner una sola imagen? -pero kiero ke kambie kada 5 segundos!! -Sí? pues ke sea una imagen .gif , te la creas kon programas creadores de animaciones .gif (ej: GIF movie gear) y hazes una animación ke kambie de una imagen a otra kada 5 segundos? -,,, ESPERO KE SIRVA! dews!



De: Javier008888
Util para: 1 personas

Fecha: 25/03/2009
Mensaje:

depiende de la version de tu foro y de los CSS de base ! donde has creado tu foro ? tengo un foro phpbb en el sitio foroactivo y me gusta cambiar el aspeto de mi foro (fondo o skin). me parece que los codigos son diferentes segun las versiones. XD



De: juanescobar711
Util para: 0 personas

Fecha: 09/04/2009
Mensaje:

Hola Amigo pues yo no fui el que pedi ayuda del tema pero por casualidad llegue aquí, lo ví y me ha servido resto... GRACIAS POR COMPARTIR TU CONOCIMIENTO CON NOSOTROS... ...Dios te Bendiga ;)



De: asun
Util para: 13 personas

Fecha: 11/04/2009
Mensaje:

Hola!
Cómo se puede lograr que una imagen de fondo cambie a 5 segundos, pero solo con HTML, llevo tiempo intentándolo peor no lo logro....
Gracias.



De: pablo
Util para: 2 personas

Fecha: 14/08/2010
Mensaje:

Hola, estube probando tu script y me funciona de maravilla, lo que note es que me deja 5 segundos en blanco (o el tiempo q le pongas) despues de ahi si funciona bien.



De: Ana luisa
Util para: 1 personas

Fecha: 16/08/2010
Mensaje:

que bueno que en un mundo lleno de maldad y egoismo aun existen buenas personas.



De: santiago
Util para: 3 personas

Fecha: 19/01/2011
Mensaje:

El codigo funciona de maravilla pero como puedo hacer que las imagenes esten centradas en la pantalla, ahora salen en la esquina superior izquierda.
Muchas gracias!



De: santiago Leandro
Util para: 3 personas

Fecha: 14/02/2011
Mensaje:

Quisiera poner link en una imagen en movimiento, como es posible. gracias



De: Felipe
Util para: 2 personas

Fecha: 29/09/2012
Mensaje:

hola a todos soy estudiante de isc, soy nuevo es esto de la programación, estoy asienndo un proyecto escolar, una pagina web en la que muestro anuncios,
en la pagina principal solo muestro las imagenes, las cuales muestro de forma dinamica usando mi bd, es importante destacar solo almaseno la URL de la imagen no la imagen, todo sale perfecto, pero ahora quiero que las imagenes que se muestran se cambien cada 5 segundos con un efecto de transicion, algien sabe como hecer eso? lo que muestran en este foro pero usando BD y no arreglos, agradeseria la ayuda cualquier cosa mi correo es: yelpi250_250@hotmail.com de antemano grax..




De: Eduardo Arkieta
Util para: 3 personas

Fecha: 11/10/2012
Mensaje:

Excelente amigo, muchas gracias.

Solo una duda si quiero hacer un efecto de transicion en el cambio de imagenes del fondo?



De: Eduardo Arkieta
Util para: 3 personas

Fecha: 11/10/2012
Mensaje:

Excelente amigo, muchas gracias.

Solo una duda si quiero hacer un efecto de transicion en el cambio de imagenes del fondo?

Mi correo arkieta@yahoo.com.mx



De: dayan
Util para: 3 personas

Fecha: 11/12/2012
Mensaje:

en parte soluciono mi proble



De: dayan
Util para: 0 personas

Fecha: 11/12/2012
Mensaje:

en parte soluciono mi problema



De: Gabriel
Util para: 4 personas

Fecha: 17/05/2013
Mensaje:

es un codigo simple y sencillo, te lo agradesco mucho !!



Volver al foro | Tema cerrado | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:31 de Agosto de 2017. Spain - Espa�a.
© 1998-2004 por . Todos los derechos reservados.