Foros del Web - Ver Mensaje Individual - Otro carruosel de imágenes manual. ( imagen 3D )

furoya · #4 (**permalink**) 20/02/2006, 12:07

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&aacute;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"> &nbsp; 
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.