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)
2.120 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
212 visualizaciones desde el 7 de Septiembre del 2020
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!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
 

Comentar la versión: Versión 4 - con una clase

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

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
228 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.681 visualizaciones desde el 7 de Septiembre del 2020
http://lwp-l.com/s6463