Código de JavaScript - Cambiar la imagen cada 5 segundos en una clase

Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar la imagen cada 5 segundos en una clasegráfica de visualizaciones


JavaScript

Publicado el 7 de Septiembre del 2020 por Joel (150 códigos)
1.259 visualizaciones desde el 7 de Septiembre del 2020
Siguiendo el código de Xavi (https://www.lawebdelprogramador.com/codigo/JavaScript/2654-Cambiar-la-imagen-cada-5-segundos.html), lo he puesto dentro de una clase para que se pueda utilizar varias veces en una misma pagina.

Se ha creado una clase que recibe el array bidimensional con las imágenes y urls, el elemento que contendrá el link y la imagen, y los milisegundos que quieras que vaya rotando las imágenes.

Versión 4 - con una clase

Publicado el 7 de Septiembre del 2020gráfica de visualizaciones de la versión: Versión 4 - con una clase
67 visualizaciones desde el 7 de Septiembre del 2020

Versión 4 - con enlace en una nueva ventana y deterniendo el intervalo de tiempo
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 7 de Septiembre del 2020gráfica de visualizaciones de la versión: Versión 4 - con enlace en una nueva ventana y deterniendo el intervalo de tiempo
88 visualizaciones desde el 7 de Septiembre del 2020

Versión 4 - deteniendo los intervalos de todas las imágenes en un clic

Publicado el 7 de Septiembre del 2020gráfica de visualizaciones de la versión: Versión 4 - deteniendo los intervalos de todas las imágenes en un clic
1.105 visualizaciones desde el 7 de Septiembre del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Este código hace lo mismo que el anterior, pero aquí cuando se pulsa sobre una imagen, se detienen todos los intervalos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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>



Comentarios sobre la versión: Versión 4 - deteniendo los intervalos de todas las imágenes en un clic (0)


No hay comentarios
 

Comentar la versión: Versión 4 - deteniendo los intervalos de todas las imágenes en un clic

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s6463