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.
[/edit]