<!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" dir="ltr" lang="es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
* {
margin: 0;
padding: 0;
border: 0;
position: relative;
}
html {
display: block;
}
body {
width: 100%;
height: 100%;
background-color: #BEBFBF;
}
#fondo1 {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-width: 700px;
opacity: 0;
filter: alfa(opacity=0);
}
#fondo2 {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-width: 700px;
opacity: 0;
filter: alfa(opacity=0);
}
#contenedor {
width: 100%;
height: auto;
z-index: 99;
border: 2px solid yellow;
}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, estaImg, contador = 0;
window.onload = function(){
arrImagenes = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];
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>