<!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.interval=0;
this.imagenes=imagenes;
this.elemento=elemento;
this.milisegundos=milisegundos;
if (this.elemento) { this.createElements();
// inicio del intervalo cada 5 segundos
this.interval=setInterval(() => this.rotarImagenes(), this.milisegundos);
}
}
/**
* 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]; }
/**
* Funcion para detener el intervalo
*/
detener() { clearInterval(this.interval);
}
}
/**
* Creamos un controlador de imagenes
* Este controlador, se encargara de isntalaciar la clase mostrarImagen
* y controlar que cuando se pulse sobre una imagen se detengan todos los
* intervalos
*/
class controlImagenes { constructor() { // definimos un array que contendra los ids de los intervalos
// para poder cerrarlos todos de golpe
this.objectoMI=[];
}
/**
* Función que instancia la clase mostrarImagen para cada grupo de imagenes
* Tiene que recibe un array bidimensional de imagenes y urls y el
* elemento donde mostrar las imagenes.
*/
agregarImagenes(imagenes, elemento, milisegundos) { elemento=document.querySelector(elemento);
// añadimos al objeto en el array
this.objectoMI.push(new mostrarImagen(imagenes, elemento, milisegundos));
// evento para detener el intervalo de todas las imagenes
elemento.addEventListener("click", () => this.pararTodasLasImagenes()); }
/**
* Función que detiene todos los intervalos
*/
pararTodasLasImagenes() { this.objectoMI.forEach(el => el.detener());
}
}
/**
* 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 control=new controlImagenes();
control.agregarImagenes(imagenes1, "#elemento1", 1000);
control.agregarImagenes(imagenes2, "#elemento2");
</script>
