Hola otra vez:
Te preparé un ejemplo que se puede adaptar fácilmente:
Código:
<html>
<head>
<title>
Transición
</title>
<script type="text/javascript">
var x, imagen1, imagen2;
var retardo = 5;
var paso = 10;
function sigueTransitando() {
x = x - paso;
imagen2.style.left = x + "px";
if (x > 0) setTimeout("sigueTransitando()", retardo);
else {
imagenTemporal = imagen1.src;
imagen1.src = imagen2.src;
imagen2.style.left = parseInt(imagen1.width) + "px";
imagen2.src = imagenTemporal;
}
}
function iniciarTransito(img1, img2) {
imagen1 = document.images[img1];
imagen2 = document.images[img2];
ancho = parseInt(imagen1.offsetWidth);
imagen2.style.left = ancho + "px";
x = ancho - (ancho % paso) + paso;// alert(x);
setTimeout("sigueTransitando()", retardo);
}
</script>
</head>
<body >
<div style="display: block; width: 133; height: 100; overflow: hidden;" >
<div style="position: relative; top: 0px; left: 0px;" >
<img name="img1"
style="position: absolute; top: 0; left: 0;"
src="../imagenes/fotos/mini/Diapositiva82.jpg"
/>
<img name="img2"
style="position: absolute; top: 0; left: 133px;"
src="../imagenes/fotos/mini/Diapositiva52.jpg"
/>
</div>
</div>
<div style="position: relative;">
<button onclick="iniciarTransito('img1', 'img2'); ">
siguiente
</button>
</div>
</body>
</html>
Pero comprobé que es cerrar desde la derecha y no desde la izquierda...
Intenta arreglarlo para que comprendas el código.
Si tienes dificultades, no dudes en consultar.
Salidos
