<!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" dir="ltr" lang="es" xml:lang="es">
<head>
<title>Documento sin título</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
html {
display: block;
}
body {
width: 100%;
height: 100%;
background-color: #BEBFBF;
}
#fondo1, #fondo2 {
position: absolute;
left: 0;
top: 0;
min-width: 700px;
width: 100%;
opacity: 0;
filter: alfa(opacity=0);
}
#contenedor {
width: 100%;
height: auto;
z-index: 99;
background-color: red;
}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, estaImg, contador = 0;
var arrImagenes = [
'http://jonlabiano.files.wordpress.com/2010/02/basket5.jpg',
'http://cousken.files.wordpress.com/2008/04/sabina.jpg',
'http://www.abc.es/Media/201005/13/sabina1--300x300.jpg'
];
window.onload = function(){
nImg = arrImagenes.length;
//precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}
//precarga
IMG1 = document.getElementById('fondo1');
IMG2 = document.getElementById('fondo2');
fadeIn(1, 0);
}
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>
<img id="fondo1" src="" alt="" />
<img id="fondo2" src="" alt="" />
<div id="contenedor">AQUÍ TODO EL CONTENIDO</div>
</body>
</html>