Buenas gente, les comento mi problema.
Quiero realizar un carrusel de 3 imagenes superpuestas con un loop infinito.
Obtuve el siguiente codigo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!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=iso-8859-1" />
<title>test</title>
<style>
#externa{ width:1000px; border:0px dashed #000; position:relative; overflow:hidden; height:400px}
#uno,#dos,#tres{ position:absolute;}
</style>
<script>
function t(id){return document.getElementById(id);}
function getStyle(id,w3cProp,IEProp){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(t(id),null). getPropertyValue(w3cProp);
}else if(t(id).currentStyle){
return t(id).currentStyle[IEProp];
}else{
alert('No se encontró el estilo');
return null;
}
}
function mover(id,vel){
var p,m;
p=m=parseInt(getStyle('externa','width','width'));
setInterval(
function(){
if(window.parar)return;
if(p<=-t(id).offsetWidth)
p=m;
p-=vel;
t(id).style.left=p+'px';
},10);
}
onload=function(){
mover('uno',,9)
mover('dos',,9)
mover('tres',9)
}
</script>
</head>
<body>
<div id="externa">
<div id="uno"><img src="1.png" width="1500" height="400"></div>
<div id="dos"><img src="2.png" width="1500" height="400"></div>
<div id="tres"><img src="3.png" width="1500" height="400"></div>
</div>
</body>
</html> Aqui lo he puesto para que vean lo que sucede: [URL="http://stylux.hostoi.com/"]link[/URL]
Y los problemas que tengo son:
1-Las imagenes comienzan a aparecer desde la derecha. Y yo quiero que ya comienzen centradas y se sigan desplazando.
2-Las imagenes no se repiten, aparecen y al terminar de aparecer completamente, comienzan de nuevo. Osea, quiero que al estar terminando comienze de nuevo.
Disculpen si esta algo entreverado.
Espero puedan ayudarme, saludos y gracias.
