Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Cambiar la imagen cada 5 segundos

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

Volver
Agregar Código Fuente
<<>>
Imágen de perfil
Val: 1.807
Plata
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(92)
Actualizado el 25 de Julio del 2019 por Xavi (548 códigos) (Publicado el 21 de Abril del 2014)
150.274 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(69)

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
67.033 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
41.487 visualizaciones desde el 11 de Septiembre del 2017

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

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
41.763 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 (12)

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
ScriptShow
22 de Octubre del 2019
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder
Gonzalo
23 de Diciembre del 2019
estrellaestrellaestrellaestrellaestrella
Gracias, funciona muy bien, lo use dentro de un container.
Responder
Jhon
24 de Febrero del 2020
estrellaestrellaestrellaestrellaestrella
Hola alguien me puede explciar como le agreso al codigo la funcion para que se detenga al hacer click sobre el
Responder
antonio
24 de Abril del 2020
estrellaestrellaestrellaestrellaestrella
Podrias hacer una version que compruebe si la imagen existe? si no existiese entonces que cargue otra imagen, gracias de antemano
Responder
Rafael
9 de Mayo del 2020
estrellaestrellaestrellaestrellaestrella
Muchas gracias me fue muy util.
Responder
pau
4 de Junio del 2020
estrellaestrellaestrellaestrellaestrella
Como se copia el código en una pagina.html y se crea una carpeta img donde poner en su interior las imágenes?

Agradecería mucho la ayuda
Responder
Imágen de perfil
Paula
29 de Marzo del 2021
estrellaestrellaestrellaestrellaestrella
Hola, lo puse en mi app y no me funciona no se porque, me pueden ayudar? paso la url, es un juego hay que poner el nombre de dos jugadores al hacer click en jugar pasaría a la animación luego te envía a un carrousel con los resultados.. https://theworldoftarot-pauclem.web.app
Responder
emilio
13 de Agosto del 2021
estrellaestrellaestrellaestrellaestrella
si yo quiero que cambie cada 1 hora como se coloca ?
Responder
David Alexis
7 de Septiembre del 2022
estrellaestrellaestrellaestrellaestrella
Consulta, como podría centrar el slide en la web y cambiar el tamaño de la imagen?
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...
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
Acepto las políticas de privacidad

http://lwp-l.com/s2654