Ver Mensaje Individual
  #2 (permalink)  
Antiguo 17/05/2011, 15:22
Avatar de IsaBelM
IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años, 6 meses
Puntos: 1012
Respuesta: Efecto tipo marqee o blink en capa

a ve si esto te da alguna idea. se trata de un rotador de imágenes con el efecto fade. aún le falta, pero te puede dar una idea
Cita:
<!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] = "img1.png";
img_vector[1] = "img2.png";
img_vector[2] = "img3.png";
img_vector[3] = "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;


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;


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;}
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>