<html>
<head>
<meta charset="utf-8">
<script>
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 listado de enlaces. Tiene que haber el mismo numero de
// enlaces que de imagenes
this.listadoEnlaces="";
// 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() { // modificamos el enlace
document.getElementById(this.showId).href=this.listadoEnlaces[this.imagen];
// modificamos la imagen
document.getElementById(this.showId).getElementsByTagName("img")[0].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 y enlaces
* Tiene que recibir un array con el listado de imagenes y enlaces
* La cantidad de enlaces y imagenes tiene que ser la misma
*/
this.IniciarSecuencia=function(listadoImagenes,listadoEnlaces) { this.listadoImagenes=listadoImagenes;
this.listadoEnlaces=listadoEnlaces
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 <a href...> que contendra 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);
/**
* 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"
];
/**
* Definimos un array de urls para cada una de las secuencias
*/
var listadoEnlaces1=[
'http://www.lawebdelprogramador.com/',
'http://www.lawebdelprogramador.com/cursos/',
'http://www.lawebdelprogramador.com/codigo/',
'http://www.lawebdelprogramador.com/foros/'
];
/**
* Funcion que se ejecuta una vez cargada la pagina (en el onload del <body>)
*/
window.onload=function()
{ /**
* Inicializamos las secuencias de imagenes, pasando como parametro el
* listado de imagenes a rotar
*/
img1.IniciarSecuencia(listadoImagenes1,listadoEnlaces1);
}
</script>
</head>
<body>
<a href="" id="secuencia1"><img src="" alt="Secuencia" id=""></a>
</body>
</html>
