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

Imágen de perfil
Val: 2.141
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(83)
Actualizado el 25 de Julio del 2019 por Xavi (Publicado el 21 de Abril del 2014)
100.843 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.432 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.442 visualizaciones desde el 11 de Septiembre del 2017
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 con visualización aleatoria (11)

david
17 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
por un codigo q funciona xD
Responder
Victor
21 de Febrero del 2018
estrellaestrellaestrellaestrellaestrella
Gracias
Responder
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
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
yerko
5 de Mayo del 2018
estrellaestrellaestrellaestrellaestrella
Hola... gracias de antemano, ojala me puedas ayudar.... quiero que mi camara ip se vea en mi web de wordpress. Mi camara sube imagenes via ftp al servidor bajo un nombre "vista"... me ayudarías con el codigo html (para insertar widjet html en wordpress), y hacer que se transmita esa imagen y que se actualice cada X segundos. :)
Responder
Diego
6 de Julio del 2018
estrellaestrellaestrellaestrellaestrella
Amigo como haria que las imagenes se adacten a la pantalla y cuando no le de sum a la pantalla no se desconfiguren las imagens
Responder
FeAsc
16 de Julio del 2018
estrellaestrellaestrellaestrellaestrella
Hola, Como seria que en vez de que cambie con el tiempo cambiara al dar click, ya sea en la imagen o en un botón independiente?
Responder
brian
19 de Julio del 2018
estrellaestrellaestrellaestrellaestrella
tambien se transforma en responsive???
Responder
EDINSON PEREZ
3 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
hola, me es muy útil, gracias pero y si quiero que también tenga un texto que cambien junto con la imagen, cual es el código que le debo agregar?
agradezco su colaboración.
Responder
Maria
4 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
Muchas gracias!
Responder
mike
25 de Julio del 2019
estrellaestrellaestrellaestrellaestrella
como hago para que las imagenes se pasen en el orden que las pongo?
Responder

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

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

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

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
10.971 visualizaciones desde el 25 de Julio del 2019
http://lwp-l.com/s2654