<html>
<head>
<script type="text/javascript">
function rotarImagenes(idDestino, imagenInicial){ // Contiene el identificador del Timeout()
this.SecuenciaID=null;
// Determina la imagen inicial. La primera imagen es la 0
this.imagen=imagenInicial;
// Determina el tiempo en milisegundos del refresco
this.duracion=3000;
// Array que contiene los objetos Image() con todas las imagenes
this.imagenes="";
// Contendra el listado de imagenes a mostrar
this.listadoImagenes="";
// Contiene el id del img donde mostrar las imagenes
this.showId=idDestino;
/**
* Funcion que genera tantas imagenes como se desee.
* Estas imagenes, seran las que se utilizaran para mostrar en la web
*/
this.CreaArray=function(n) { this.length = n
for (var i = 0; i<n; i++) { this[i] = new Image()
}
return this
};
/**
* Funcion para detener y reiniciar la secuencia de imagenes
* En este ejemplo, se puede iniciar o parar la secuancia poniendo el raton
* encima de la imagen. Para ello, se ha utilizado el evento onmouseover()
* y onmouseout() en el <img>
*/
this.Secuencia=function(type) { if(type=="stop")
{ clearTimeout(this.SecuenciaID);
}else if(type=="start"){ this.MostrarSecuencia();
}
};
/**
* Funcion que va mostrando la secuencia de imagenes
*/
this.MostrarSecuencia=function() { document.getElementById(this.showId).src = this.imagenes[this.imagen].src;
this.imagen++;
if(this.imagen>=this.listadoImagenes.length)
this.imagen=0
var instant = this;
this.SecuenciaID=setTimeout(function() { instant.MostrarSecuencia();}, this.duracion); };
/**
* Funcion inicial donde se inicializan las imagenes
* Tiene que recibir un array con el listado de imagenes
*/
this.IniciarSecuencia=function(listadoImagenes) { this.listadoImagenes=listadoImagenes;
this.imagenes=new this.CreaArray(listadoImagenes.length);
for (var i = 0; i<listadoImagenes.length; i++) { this.imagenes[i].src = listadoImagenes[i];
}
this.MostrarSecuencia();
};
};
/**
* Definimos tantas variables como secuencias diferentes de imagenes deseemos
* Cada secuencia funcionara por si sola.
* Pasamos como parametro:
* - el identificador (id) del <img> donde se visualizaran las imagenes
* - el identificador de la imagen inicial que deseamos que se visualice.
* La primera imagen es el valor 0
*/
var img1=new rotarImagenes("secuencia1",0);var img2=new rotarImagenes("secuencia2",0);var img3=new rotarImagenes("secuencia3",0);/**
* Definimos un array de imagenes para cada una de las secuencias
*/
var listadoImagenes1=[
"/carpeta/image1.jpg",
"/carpeta/image2.jpg",
"/carpeta/image3.jpg",
"/carpeta/image4.jpg",
"/carpeta/image5.jpg",
"/carpeta/image6.jpg"
];
var listadoImagenes2=[
"/carpeta/image10.jpg",
"/carpeta/image11.jpg",
"/carpeta/image12.jpg",
"/carpeta/image13.jpg",
"/carpeta/image14.jpg"
];
var listadoImagenes3=[
"/carpeta/image10.jpg",
"/carpeta/image11.jpg"
];
/**
* Funcion que se ejecuta una vez cargada la pagina (en el onload del <body>)
*/
function start_rotarImagenes()
{ /**
* Inicializamos las secuencias de imagenes, pasando como parametro el
* listado de imagenes a rotar
*/
img1.IniciarSecuencia(listadoImagenes1);
/**
* Modificamos el valor de los milisegundo entre transiciones para el
* objeto img2
*/
img2.duracion=1000;
img2.IniciarSecuencia(listadoImagenes2);
img3.IniciarSecuencia(listadoImagenes3);
}
</script>
</head>
<body onload="start_rotarImagenes()">
<!-- Definimos los <img> donde se rotaran las imagenes -->
<img src="" alt="Secuencia" id="secuencia1" onmouseover="img1.Secuencia('stop')" onmouseout="img1.Secuencia('start')"><img src="" alt="Secuencia" id="secuencia2" onmouseover="img2.Secuencia('stop')" onmouseout="img2.Secuencia('start')"><img src="" alt="Secuencia" id="secuencia3" onmouseover="img3.Secuencia('stop')" onmouseout="img3.Secuencia('start')">
</body>
</html>
