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

Imágen de perfil
Val: 2.029
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

Actualizado el 25 de Julio del 2019 por Xavi (532 códigos) (Publicado el 21 de Abril del 2014)
111.858 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(68)

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
53.254 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.846 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:
1
<a href="" id="link"><img src="" id="imagen"></a>
por esta:
1
<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...
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 3 - Con un enlace (url) en cada imagen con visualización secuencial
estrellaestrellaestrellaestrellaestrella(9)

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