<!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>Documento sin título</title>
<style type="text/css">
#contenedor {
background: red;
width: 562px;
height: 320px;
border: 1px solid red;
}
#contenedor > div {
display: inline-block;
}
#botonera {
background: pink;
width: 40px;
height: 320px;
vertical-align: top;
}
#botonera p, #botonera p[class="inicio"] {
text-align: center;
margin: 5px 2px;
border: 1px solid yellow;
}
#botonera p {
background: orange;
cursor: pointer;
}
#botonera p[class="inicio"] {
background: red;
}
#contenedor2 {
width: 500px;
height: 320px;
}
#visor {
position: absolute;
background: #111;
z-index: -1;
width: 518px;
height: 320px;
}
</style>
<script type="text/javascript">
var url_vector = new Array();
var banner_vector = new Array();
var img_vector = new Array();
img_vector[0] = "css/img1.png";
img_vector[1] = "css/img2.png";
img_vector[2] = "css/img3.png";
img_vector[3] = "css/img4.png";
url_vector[0] = "http://www.url1.com";
url_vector[1] = "http://www.url2.com";
url_vector[2] = "http://www.url3.com";
url_vector[3] = "http://www.url4.com";
if(document.images){
for(var i = 0; i < img_vector.length; i++) {
banner_vector[i]=new Image();
banner_vector[i].src = img_vector[i];
}
}
var counter = 1;
function inicio() {
document.getElementById('visor').style.zIndex = -1;
temporizadorFadeIn = setInterval(fadeIn, 25);
}
var temporizadorFadeIn;
var temporizadorFadeOut;
var transparencia = 0;
var opacTotal = 70;
var temporizadorRotador;
function fadeIn() {
transparencia += 1;
transparencia = parseInt(transparencia);
var opacidad = transparencia /100;
//si terminó la transición se oculta la capa y se limpia el temporizadorFadeIn
if(document.getElementById('visor').style.zIndex == -1) {document.getElementById('visor').style.zIndex = 999;}
transparencia = (transparencia == opacTotal) ? opacTotal : transparencia;
if(transparencia == opacTotal) {
clearInterval(temporizadorFadeIn);
temporizadorFadeOut = setInterval(fadeOut, 25);
document.getElementById('img').src = banner_vector[counter % banner_vector.length].src;
document.getElementById("contenedor").getElementsB yTagName('a')[0].href = url_vector[counter % url_vector.length]
document.getElementById("botonera").getElementsByT agName('p')[counter % banner_vector.length].style.background="red";
if (counter >= 1) {
counter--;
document.getElementById("botonera").getElementsByT agName('p')[counter % banner_vector.length].style.background="orange";
counter++;
}
counter++;
}
var obj = document.getElementById('visor');
if (document.all){
obj.style.filter = 'alpha(opacity='+transparencia+')';
}else{
obj.style.MozOpacity = opacidad;
obj.style.opacity = opacidad;
obj.style.KHTMLOpacity = opacidad;
}
}
function fadeOut() {
transparencia -= 1;
transparencia = parseInt(transparencia);
var opacidad = transparencia /100;
//si terminó la transición se oculta la capa y se limpia el temporizadorFade
transparencia = (transparencia == 0) ? 0 : transparencia;
if(transparencia == 0) {document.getElementById('visor').style.zIndex = -1; clearInterval(temporizadorFadeOut); }
var obj = document.getElementById('visor');
if (document.all){
obj.style.filter = 'alpha(opacity='+transparencia+')';
}else{
obj.style.MozOpacity = opacidad;
obj.style.opacity = opacidad;
obj.style.KHTMLOpacity = opacidad;
}
}
window.addEventListener('load', function() {
document.getElementById("contenedor").getElementsB yTagName('a')[0].href = url_vector[0];
document.getElementById("contenedor").getElementsB yTagName('img')[0].src = img_vector[0];
temporizadorRotador = setInterval(inicio, 5000);
var but = document.getElementById('botonera').getElementsByT agName('p');
for (var i = 0; i < but.length; i++) {
but[i].addEventListener('click', function() {
var elem_click = this.id.split('_')[1];
if (parseInt((elem_click*1)+1) == parseInt(counter % url_vector.length)) {return;}
//alert(parseInt((elem_click*1)+1) + ' - ' + parseInt(counter % url_vector.length));
clearInterval(temporizadorFadeIn);
clearInterval(temporizadorFadeOut);
clearInterval(temporizadorRotador);
counter = elem_click;
inicio();
temporizadorRotador = setInterval(inicio, 5000);}, false);
}
}
, false);
</script>
</head>
<body>
<div id="contenedor">
<div id="botonera"><p class="inicio" id="ban_0">bot1</p><p id="ban_1">bot2</p><p id="ban_2">bot3</p><p id="ban_3">bot4</p></div>
<div id="contenedor2">
<div id="visor"></div>
<a href=""><img src="" alt="" id="img" /></a>
</div>
</div>
</body>
</html>