Atendiendo al éxito arrollador de mi código previo, agrego otro mucho más viejo , pero con alguna similitud.
En este caso solamente hay un botón deslizable para cambiar las imágenes, pero se le puede adaptar cualquiera de los otros métodos.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>CAMBIA IMAGEN CON BOTÓN DESLIZANTE.</TITLE>
<script type="text/javascript">
var Dib=new Array(7)
Dib[0]=new Image()
Dib[0].src="http://www.forosdelweb.com/images/smilies/biggrin.gif"
Dib[1]=new Image() //TERCERA IMAGEN
Dib[1].src="http://www.forosdelweb.com/images/smilies/wink.gif"
Dib[2]=new Image() //CUARTA IMAGEN
Dib[2].src="http://www.forosdelweb.com/images/smilies/cool.gif"
Dib[3]=new Image() //QUINTA IMAGEN
Dib[3].src="http://www.forosdelweb.com/images/smilies/borracho.gif"
Dib[4]=new Image() //SEXTA IMAGEN
Dib[4].src="http://www.forosdelweb.com/images/smilies/chillando.gif"
Dib[5]=new Image() //SEGUNDA IMAGEN
Dib[5].src="http://www.forosdelweb.com/images/smilies/smile.gif"
Dib[6]=new Image() //PRIMERA IMAGEN
Dib[6].src="http://www.forosdelweb.com/images/smilies/frown.gif"
var i = 0;
function Siguiente(){
if(i==(Dib.length-1))i=0;
else i=i+1;
}
function Cambio(){
var posic= document.getElementById("BDesliz").scrollLeft;
document.getElementById("ValorDespl").value = posic;
document.getElementById("ImgIzq").style.width = posic+"px";
document.getElementById("ImgDer").style.width = 100-posic+"px";
if(posic=='100'){
document.getElementById("ImgDer").src = Dib[i].src;
Siguiente();}
if(posic=='0'){
document.getElementById("ImgIzq").src = Dib[i].src;
Siguiente();}
document.getElementById("orden").value = i;
}
</script>
<style type="text/css">
table{height:100px; width:100px; background:silver; border-collapse:collapse; font-size:1px; align:center; }
#ImgIzq{width:0; height:100px; border:1px solid black; }
#ImgDer{width:100px; height:100px; border:1px solid black; }
#BDesliz{overflow:auto; width:200px; height:80px; text-align:left; }
#relleno{height:1px; width:300px; overflow:hidden; }
</style>
</head>
<body>
<h2>Cambia imágenes con botón deslizante y efecto de rotación " 3D ".</H2>
<table align="center"><tbody><tr><td>
<nobr><img id="ImgIzq" src="http://www.forosdelweb.com/images/smilies/smile.gif" alt="Izq.">
<img id="ImgDer" src="http://www.forosdelweb.com/images/smilies/frown.gif" alt="Der."></nobr>
</td></tr></tbody></table>
<center>
<div id="BDesliz" onscroll="Cambio()">
<div id="relleno"></div>
</div>
<p>Posición <input id="ValorDespl" size="2">
Imagen Nº <input id="orden" size="1"> </p>
</center>
</body></html>
Si alguien pretende validar el código : ni lo piense;
onscroll y
nobr no van a pasar. A menos que le inventemos algo, pero no vale la pena.