Rotor de Capas

[AnesGy]

El problema de flash es que si no tienes el plug in no se ve. Hazlo con java, no est an complicado.

El código HTML

Para hacer el sistema necesitas un DIV con un fondo de imagen (mejor que poner una imagen, así es más compatible) y que todas las imágenes sean del mismo tamaño. En el ejemplo de la NBA lo hacen con una imagen, pero este método me resulta más sencillo de explicar.

El div donde se mostrará la imagen tendrá unas dimensiones (las de todas las imágenes) y tendrá un atributo id que le daremos el valor de "cajadeimagen"

Código HTML:

<div style="width: 400px;height:300px" id="cajadeimagen">
 
</div> 

Todavía quedan los botones que los vemos mas tarde.


Ahora para el código de JAVASCRIPT

Este se coloca al final del body (o después del DIV que hicimos antes) entre etiquetas de <script type="text/javascript"> y </script>


La idea es que tienes una variabe

Código javascript:

var time;
 

en esta variable metremos el timeout (time = setTimeout(tantos segundos)). Esta variable la queremos para hacer el efecto de los botones.

Ahora tenemos una matriz con las imágenes y un índice:

Código javascript:

var matriz = Array("imagen1.jpg", "imagen2.jpg", "imagen3.jpg");
var indice = 0;
 

Este ejemplo solo tiene tres imágenes.

Ahora tendremos una variable que haga referencia al DIV que contiene las imágenes:

Código javascript:

var mydiv = document.getElementById("cajadeimagen");
 

Ahora haremos una llamada inicial para que inicialmente la caja tenga una imagen:

Código javascript:

mydiv.style.backgroundImage=matriz[0];
 

Y definimos el timeout (8 segundos = 8000 milisegundos):

Código javascript:

time = setTimeout("cambiardeimagen()",8000);
 

Ahora hacemos la función cambiardeimagen() que nos permite cambiar las imágenes:

Código javascript:

var time;
function cambiardeimagen(){
 indice += 1;
 if(indice == matriz.length){indice=0;}
 mydiv.style.backgroundImage=matriz[indice];
}
 

Todo junto:

Código javascript:

var matriz = Array("imagen1.jpg", "imagen2.jpg", "imagen3.jpg");
var indice = 0;
mydiv.style.backgroundImage=matriz[0];
time = setTimeout("cambiardeimagen()",8000);
function cambiardeimagen(){
 indice += 1;
 if(indice == matriz.length){indice=0;}
 mydiv.style.backgroundImage=matriz[indice];
}
 

Ahora quedan los botones

Los botones los colocas donde quieras, puedes hacer tantos como imágenes haya, y estos los puedes generar con PHP o con javascript.

En los botones hay que tener dos atributos:

onmousemove="clearTimeout(time);"
onmouseout="time = setTimeout("cambiardeimagen()",8000);"