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

Pos: 5

Val: 1.807

Ha mantenido su posición en JavaScript (en relación al último mes)

Cambiar la imagen cada 5 segundos

JavaScript

(93)

Actualizado el 25 de Julio del 2019 por Xavi (548 códigos) (Publicado el 21 de Abril del 2014)

168.036 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
(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

73.682 visualizaciones desde el 21 de Abril del 2014

Versión 2 - Con un enlace (url) en cada imagen con visualización aleatoria
(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

42.492 visualizaciones desde el 11 de Septiembre del 2017

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

<!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

por un codigo q funciona xD

Responder

Victor

21 de Febrero del 2018

Gracias

Responder

samuel valenzuela

15 de Marzo del 2018

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

xve

15 de Marzo del 2018

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

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

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

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

tambien se transforma en responsive???

Responder

EDINSON PEREZ

3 de Abril del 2019

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

Muchas gracias!

Responder

mike

25 de Julio del 2019

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

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

Publicado el 25 de Julio del 2019

gráfica de visualizaciones de la versión: Versión 3 - Con un enlace (url) en cada imagen con visualización secuencial

51.864 visualizaciones desde el 25 de Julio del 2019

http://lwp-l.com/s2654

Ejemplo del objeto Map para almacenar elementos clave:valor

Validar una dirección IP en un formulario

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

Versión 1 - Sin enlace aleatorio(69)

Versión 2 - Con un enlace (url) en cada imagen con visualización aleatoria(11)

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

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

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

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

Versión 1 - Sin enlace aleatorio
(69)

Versión 2 - Con un enlace (url) en cada imagen con visualización aleatoria
(11)

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