<!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 control {}
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);
// evento para parar el
this.elemento.addEventListener("click", () => clearInterval(this.interval)); }
}
/**
* Función que crea el contenido para el elemento recibido
*/
_createElements() { const a=document.createElement("a"); a.target="_blank";
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 el
* primer elemento
*/
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 el
* segundo elemento
*/
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>
