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

Imágen de perfil

Cambiar la imagen cada 5 segundosgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(71)
Actualizado el 11 de Septiembre del 2017 por Xavi (Publicado el 21 de Abril del 2014)
60.963 visualizaciones desde el 21 de Abril del 2014. Una media de 294 por semana
Simple código que muestra como cambiar una imagen de nuestra pagina de cada 5 segundos por otra imagen de forma aleatoria.

Hay dos versiones, con y sin enlaces (link) en las imágenes.

Versión 1 - Sin enlace
estrellaestrellaestrellaestrellaestrella(67)

Actualizado el 21 de Febrero del 2018 (Publicado el 21 de Abril del 2014)gráfica de visualizaciones de la versión: Versión 1 - Sin enlace
46.718 visualizaciones desde el 21 de Abril del 2014. Una media de 224 por semana

Versión 2 - Con un enlace (url) en cada imagen
estrellaestrellaestrellaestrellaestrella(4)

Actualizado el 03 de Diciembre del 2017 (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
14.248 visualizaciones desde el 11 de Septiembre del 2017. Una media de 441 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

En esta segunda versión, he añadido un enlace a cada imagen.

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
46
<!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/']
    );
 
    /**
     * Funcion para cambiar la imagen y link
     */
    function rotarImagenes()
    {
        // obtenemos un numero aleatorio entre 0 y la cantidad de imagenes que hay
        var index=Math.floor((Math.random()*imagenes.length));
 
        // cambiamos la imagen y la url
        document.getElementById("imagen").src=imagenes[index][0];
        document.getElementById("link").href=imagenes[index][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 2 - Con un enlace (url) en cada imagen (4)

david
17 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
por un codigo q funciona xD
Responder
Victor
21 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Gracias
Responder
samuel valenzuela
15 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
Buenas amigo gracias por el codigo funciona exelente pero tengo una duda no logro hacer que al darle clic a una de las imagenes el link se abra en una pestaña nueva si me puedes ayudar te lo agradeceria mucho
Responder
Imágen de perfil
xve
15 de Marzo del 2018
estrellaestrellaestrellaestrellaestrella
tienes que modificar esta linea:
<a href="" id="link"><img src="" id="imagen"></a>
por esta:
<a href="" id="link" target="_blank"><img src="" id="imagen"></a>
Responder

Comentar la versión: Versión 2 - Con un enlace (url) en cada imagen

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

http://lwp-l.com/s2654