<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
.caja img {width:200px; height:200px;}
</style>
</head>
<body>
<div id="elemento1" class="caja"></div>
<div id="elemento2" class="caja"></div>
</body>
</html>
<script>
class mostrarImagen {
/**
* Constructor que recibe un array bidimensional de imagenes y urls y el
* elemento donde mostrar las imagenes.
*/
constructor(imagenes, elemento, milisegundos=5000) {
this.imagenes=imagenes;
this.elemento=document.querySelector(elemento);
if (this.elemento) {
this._createElements();
// inicio del intervalo cada 5 segundos
this.interval=setInterval(() => this.rotarImagenes(), milisegundos);
}
}
/**
* Función que crea el contenido para el elemento recibido
*/
_createElements() {
const a=document.createElement("a");
const img=document.createElement("img");
a.appendChild(img);
this.elemento.appendChild(a);
this.rotarImagenes();
}
/**
* Funcion para cambiar la imagen y link
*/
rotarImagenes() {
// obtenemos un numero aleatorio entre 0 y la cantidad de imagenes que hay
const index=Math.floor((Math.random()*this.imagenes.length));
// obtenemos acceso al elemento donde se encuetra el enlace y image
// cambiamos la imagen y la url
this.elemento.querySelector("a").href=this.imagenes[index][1];
this.elemento.querySelector("img").src=this.imagenes[index][0];
}
}
/**
* Array bidimensional con las imagenes y enlaces que se iran mostrando en la web
*/
var imagenes1=[
['img/1.jpg','http://www.lawebdelprogramador.com/cursos/'],
['img/2.jpg','http://www.lawebdelprogramador.com/foros/'],
['img/3.jpg','http://www.lawebdelprogramador.com/pdf/'],
['img/4.jpg','http://www.lawebdelprogramador.com/utilidades/']
];
/**
* Array bidimensional con las imagenes y enlaces que se iran mostrando en la web
*/
var imagenes2=[
['img/5.jpg','http://www.lawebdelprogramador.com/cursos/'],
['img/6.jpg','http://www.lawebdelprogramador.com/foros/'],
];
const rotarImagen1=new mostrarImagen(imagenes1, "#elemento1");
const rotarImagen2=new mostrarImagen(imagenes2, "#elemento2", 1000);
</script>
Comentarios sobre la versión: Versión 4 - con una clase (0)
No hay comentarios