Foros del Web » Programando para Internet » Javascript »

Otro carruosel de imágenes manual. ( imagen 3D )

Estas en el tema de Otro carruosel de imágenes manual. ( imagen 3D ) en el foro de Javascript en Foros del Web. Hay muchos ejemplos de slide show image , y agrego éste porque es una excusa para mostrar un par de formas de cómo desplazarlos manualmente. ...
  #1 (permalink)  
Antiguo 04/12/2005, 15:24
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Otro carrousel de imágenes manual. ( imagen 3D )

Hay muchos ejemplos de slide show image , y agrego éste porque es una excusa para mostrar un par de formas de cómo desplazarlos manualmente. Además hay algún agregado, las imágenes no son 'imágenes' sino 'imagen'. El método de ponerlas a todas en una tira a modo de película no es nuevo. En teoría funciona más rápido ( se carga una sola imagen, el navegador usa una sola paleta de color para todos los cuadros, el escript no tiene que hacer reemplazos ni precarga ), pero los archivos son enormes.

El que está abajo tampoco es el más eficiente : la tira debió ser vertical en vez de horizontal, y hasta podía haber sido un cuadrado, calculando las posiciones de cada cuadro con un javascript más complejo. No hay thumbnail, así que va solamente el enlace.

http://img234.imageshack.us/img234/2641/calavera3d2so.jpg

Apoveché el código para hacer un efecto de animación 3D ( una rotación sobre el eje y ). Por supuesto que es posible nada más que con la imagen apropiada; y sobre los métodos para hacerla se puede consultar en el foro de Diseño.

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>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<title>EFECTO DE ROTACIÓN DE IMAGEN CUADRO A CUADRO. </title>
<script type="text/javascript">
var despl = 0;

        /*RUEDITA*/
function ruedaIE(){
if (event.wheelDelta >= 120) adel();
else if (event.wheelDelta <= -120) atras(); 
}

        /*BOTÓN DESLIZANTE*/
function gira(T){
var valor = T.scrollLeft;
despl = (Math.floor(valor/200))*-100;
document.getElementById("imagen").style.left = despl+ "px";
}

        /*BOTÓN OVER / CLICK*/
var paso;
var distancia = 0;
var vel = 100;

function adel1(){
if(despl == -2800) despl = 0;
despl = despl - 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
adel2();
}

function adel2(){
paso = setTimeout("adel1()" , vel)
}

function atras1(){
if(despl == 0) despl = -2800;
despl = despl + 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
atras2();
}

function atras2(){
paso = setTimeout("atras1()" , vel)
}


        /*BOTÓN MOVE*/
var iconos = ["-" , "<" , "-" , ">"];
var nIconos = 0;
var espera = 0;
var conAyuda = true;

function cambioIco(T){
T.style.cursor = "default";
T.title = "Atr\xE1s";
if(T.value == "?"){
ayuda();
}
nIconos +=1;
if(nIconos == 4)nIconos = 0;
T.value = iconos[nIconos];
}

function cambioDir(T){
if(T.value == "-"){
T.title = "Detener";
}
else if(T.value == "<" && espera == 0){
T.title = "Atr\xE1s";
atras();
espera = 1;
setTimeout("espera = 0;" , 75)
}
else if(T.value == ">" && espera == 0){
T.title = "Adelante";
adel();
espera = 1;
setTimeout("espera = 0;" , 75)
}
}

function ayuda(){
if(conAyuda)
conAyuda = confirm("Click para cambiar de direcci\xF3n o detener. Move para animar. ¿Desea que la ayuda est\xE9 disponible con Doble Click?.");
}

        /*BOTÓN MOVE Y RUEDITA*/
function adel(){
if(despl == -2800) despl = 0;
despl = despl - 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
}

function atras(){
if(despl == 0) despl = -2800;
despl = despl + 100;
status = despl;
document.getElementById("imagen").style.left = despl+ "px";
}

        /*TODOS*/
onload = function(){document.getElementById('imagen').style.left = '0'; distancia = 0;}
</script>

<style type="text/css">
body{font:bold 100% "times new roman" "arial" "courier new"; text-align:center; background-color:#000}
#contImagen{height:75px; width:100px; overflow:hidden; padding:0; border-collapse:collapse; position:relative; text-align:left; margin:auto; margin-top:50px; }
#imagen{position:absolute; }
h2{color:#f00; text-align:left; }

        /*BOTÓN DESLIZANTE*/
#relleno{width:5800px; height:1px; overflow:hidden; font-size:1px; background-color:transparent; }
#barraBoton{overflow:-moz-scrollbars-horizontal; overflow:auto; margin:auto; height:50px; width:200px; scrollbar-face-color:#f00; scrollbar-highlight-color:#000; scrollbar-shadow-color:#000; scrollbar-arrow-color:#000; scrollbar-track-color:#000; scrollbar-base-color:#000; scrollbar-3dlight-color:#f00; scrollbar-darkshadow-color:#f00; }

        /*BOTÓN OVER / CLICK*/
input{font: bold 150% "times new roman" "arial" "courier new"; width:1.5em; height:1.5em; background-color:#f00; border-color:#f00}

        /*BOTÓN MOVE*/
#bCambio{width:4em; height:1.5em; background-color:#f00; font:bold 150% "times new roman" "arial" "courier new"; cursor:help; }
</style>
</head>

<body>

<h2>Rotar imagen con botones : deslizante, <i>over / click</i>, y <i>move</i>. (IE , FF)</h2>

<div id="contImagen"><img id="imagen" src="http://img234.imageshack.us/img234/2641/calavera3d2so.jpg" onmousewheel="ruedaIE()"  /></div>

        <!-- BOTÓN DESLIZANTE -->
<div id="barraBoton" onscroll="gira(this)">
<div id="relleno"></div>
</div>
<br /><br />

        <!-- BOTÓN OVER / CLICK -->
<input type="button" id="bAtras" value="«" onmouseover="vel=500; atras1()" onmouseout="clearTimeout(paso)" onmousedown="vel=150; atras1()" onmouseup="vel=500;clearTimeout(paso)" onfocus="this.blur()" />

<input type="button" id="bAdel" value="»" onmouseover="vel=500; adel1()" onmouseout="clearTimeout(paso)" onmousedown="vel=150; adel1()" onmouseup="vel=500;clearTimeout(paso)" onfocus="this.blur()" />
<br /><br />

        <!-- BOTÓN MOVE (en algunos navegadores, el evento onmousemove se comporta como onmouseover) -->
<input type="button" id="bCambio" value="?" title="Click para ayuda." onclick="cambioIco(this)" onmousemove="cambioDir(this)" ondblclick="ayuda()" onfocus="this.blur()" />

</body>
</html>
Las ventajas de un JPG animado a javascript sobre el GIF animado son evidentes : se puede manejar la velocidad, se puede detener y reiniciar en cualquier punto, se puede invertir la dirección, y todo en forma manual, automática o siguiendo eventos que ocurran en otra parte del documento.

[edit]

Al final decidí meter la imagen.

Código:
 
[/edit]

Última edición por furoya; 15/04/2008 a las 14:44 Razón: actualizar código
  #2 (permalink)  
Antiguo 04/12/2005, 17:11
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 5 meses
Puntos: 4



Sólo decirte que en Opera 8.5 tambien funciona
__________________
by Capitán Buscapina
.
  #3 (permalink)  
Antiguo 05/12/2005, 11:39
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Gracias Cap.Buscapina !

Ese dato es importante y ni me lo imaginaba.
  #4 (permalink)  
Antiguo 20/02/2006, 12:07
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
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.

Última edición por furoya; 15/04/2008 a las 14:46 Razón: actualizar código
  #5 (permalink)  
Antiguo 20/02/2006, 14:15
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 5 meses
Puntos: 4
Cita:
Iniciado por Cap.Buscapina



Sólo decirte que en Opera 8.5 tambien funciona

idem al anterior
__________________
by Capitán Buscapina
.
  #6 (permalink)  
Antiguo 20/02/2006, 17:21
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 4 meses
Puntos: 317
Muchas gracias!

Ese navegador sigue sumando puntos ...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:37.