<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#img1 {
width: 900px;
height: 350px;
position: absolute;
opacity: 0;
filter: alfa(opacity=0);
}
#img2 {
width: 900px;
height: 350px;
position: absolute;
opacity: 0;
filter: alfa(opacity=0);
}
</style>
<script type="text/javascript">
var imagenes = new Array(), nImg, contadorImg = 0, estaImg, contador = 0, objImg1, objImg2;
window.onload = function(){
var arrImagenes = ['img01.png', 'img02.png', 'img03.png', 'img04.png', 'img05.png'];
nImg = arrImagenes.length;
if(typeof(arrImagenes) === 'undefined' || nImg < 2){
alert('error con imágenes')
return false;
}
//precarga
for (var i = 0; i < nImg; i++){
imagenes[i] = new Image();
imagenes[i].src = arrImagenes[i];
}
//precarga
objImg1 = creaImg(objImg1, imagenes[0]);
objImg2 = creaImg(objImg2, imagenes[1]);
var cont = document.getElementById('contenedor');
cont.appendChild(objImg1);
cont.appendChild(objImg2);
IMG1 = document.getElementById('img1');
IMG2 = document.getElementById('img2');
fadeIn(1, 0);
}
function creaImg(obj, img){
obj = document.createElement('img');
obj.id = (contadorImg == 0) ? 'img1' : 'img2';
contadorImg++;
return obj;
}
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="content">
<h2><a href="#">Bienvenidos a FloreXpress </a></h2>
<div class="entry">
<div id="contenedor"></div>
<p>Esto es <strong>FloreXpress </strong> una tienda virtual
dedicada a la venta de ramos de flores y arreglos florales para
cualquier ocasion.
¿Planeas un matrimonio? ¿Estas de aniversario? ¿Quieres que te
perdonen? O tan solo deseas regalonear a la persona que amas?
</p>
</div>
</div>
</body>
</html>