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

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

Cambiar la imagen cada 5 segundosgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(82)
Actualizado el 25 de Julio del 2019 por Xavi (Publicado el 21 de Abril del 2014)
98.350 visualizaciones desde el 21 de Abril del 2014
Simple código que muestra como cambiar una imagen de nuestra pagina cada 5 segundos por otra imagen de forma aleatoria o secuencial

Hay tres versiones:
- una sin enlace aleatorio
- una con enlaces (link) en las imágenes de forma aleatoria
- una con enlaces (link) en las imágenes de forma secuencial

Versión 1 - Sin enlace aleatorio
estrellaestrellaestrellaestrellaestrella(67)

Actualizado el 25 de Julio del 2019 (Publicado el 21 de Abril del 2014)gráfica de visualizaciones de la versión: Versión 1 - Sin enlace aleatorio
51.060 visualizaciones desde el 21 de Abril del 2014

Versión 2 - Con un enlace (url) en cada imagen con visualización aleatoria
estrellaestrellaestrellaestrellaestrella(11)

Actualizado el 25 de Julio del 2019 (Publicado el 11 de Septiembre del 2017)gráfica de visualizaciones de la versión: Versión 2 - Con un enlace (url) en cada imagen con visualización aleatoria
38.369 visualizaciones desde el 11 de Septiembre del 2017

Versión 3 - Con un enlace (url) en cada imagen con visualización secuencial
estrellaestrellaestrellaestrellaestrella(4)

Publicado el 25 de Julio del 2019gráfica de visualizaciones de la versión: Versión 3 - Con un enlace (url) en cada imagen con visualización secuencial
8.923 visualizaciones desde el 25 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

En esta tercera versión la visualización de las imágenes es secuencial.

Hay que copiar el código en una pagina.html y crear una carpeta img donde poner en su interior las imágenes. Para este código de ejemplo, las imágenes se denominan 1.jpg, 2.jpg, 3.jpg y 4.jpg
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
<!DOCTYPE html>
<head>
<script>
    /**
     * Array con las imagenes y enlaces que se iran mostrando en la web
     */
    var imagenes=new Array(
        ['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/']
    );
    var contador=0;
 
    /**
     * Funcion para cambiar la imagen y link
     */
    function rotarImagenes()
    {
        // cambiamos la imagen y la url
        contador++
        document.getElementById("imagen").src=imagenes[contador%imagenes.length][0];
        document.getElementById("link").href=imagenes[contador%imagenes.length][1];
    }
 
    /**
     * Función que se ejecuta una vez cargada la página
     */
    onload=function()
    {
        // Cargamos una imagen aleatoria
        rotarImagenes();
 
        // Indicamos que cada 5 segundos cambie la imagen
        setInterval(rotarImagenes,5000);
    }
</script>
</head>
 
<body>
 
<a href="" id="link"><img src="" id="imagen"></a>
 
</body>
</html>



Comentarios sobre la versión: Versión 3 - Con un enlace (url) en cada imagen con visualización secuencial (4)

Jasisantex
31 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
Excelente código , fácil de usar y se puede colocar en una etiqueta DIV . o una tabla y funciona correctamente .

Gracias por el APORTE

JM
Responder
Mel
6 de Septiembre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
fernanda
22 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Imágen de perfil
22 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: Versión 3 - Con un enlace (url) en cada imagen con visualización secuencial

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2654