Podrías hacer algo así:
Código HTML:
Ver original<!DOCTYPE html>
<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" />
<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 id="wrap-contenido"> <!-- contenido de ejemplo -->
<h1>Mi p
á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 -->
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