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(75)
Actualizado el 11 de Septiembre del 2017 por Xavi (Publicado el 21 de Abril del 2014)
69.564 visualizaciones desde el 21 de Abril del 2014. Una media de 301 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
47.517 visualizaciones desde el 21 de Abril del 2014. Una media de 210 por semana

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

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
22.048 visualizaciones desde el 11 de Septiembre del 2017. Una media de 413 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 (8)

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
yerko
05 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
06 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

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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2654  
Revisar política de publicidad