<!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, body {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
}
#fondo-imag {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fondo-imag img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 100%;
opacity: 0;
filter: alfa(opacity=0);
}
/* COLUMNAS */
#cont {margin: 0 auto; width: 440px; border: 1px solid white;}
#cont div.alineacion {display: inline-block; width: 100px; vertical-align: top; margin: 0 20px;}
.alineacion div {width:100px; border: 1px solid yellow; margin: 20px 0; color: white;}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, estaImg, contador = 0;
var arrImagenes = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];
window.onload = function(){
nImg = arrImagenes.length;
//precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}
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>
<div id="fondo-imag">
<img id="fondo1" src="" alt="" />
<img id="fondo2" src="" alt="" />
</div>
<div id="cont">
<div class="alineacion">
<div><b>Noticia1</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia4</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit.</div>
</div>
<div class="alineacion"">
<div><b>Noticia2</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
<div><b>Noticia5</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
</div>
<div class="alineacion">
<div><b>Noticia3</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien. Nam lobortis turpis nec nisl tempor sit amet malesuada diam luctus.</div>
<div><b>Noticia6</b><br /><br />Suspendisse potenti. Praesent ut risus ligula, quis ultrices libero. Sed faucibus leo vitae tortor tincidunt eget pulvinar nulla suscipit. Vestibulum eget libero metus, sit amet iaculis ante. Curabitur sed ligula dolor. Aliquam erat volutpat. Cras sit amet ligula dolor, a eleifend sapien.</div>
</div>
</div>
</body>
</html>