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)

170.146 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

74.215 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.703 visualizaciones desde el 11 de Septiembre del 2017

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

53.229 visualizaciones desde el 25 de Julio del 2019

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

<!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 (13)

Jasisantex

31 de Julio del 2019

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

No ha dejado ningún comentario

Responder

fernanda

22 de Octubre del 2019

No ha dejado ningún comentario

Responder

ScriptShow

22 de Octubre del 2019

No ha dejado ningún comentario

Responder

Gonzalo

23 de Diciembre del 2019

Gracias, funciona muy bien, lo use dentro de un container.

Responder

Jhon

24 de Febrero del 2020

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

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

Muchas gracias me fue muy util.

Responder

pau

4 de Junio del 2020

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

Paula

29 de Marzo del 2021

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

si yo quiero que cambie cada 1 hora como se coloca ?

Responder

David Alexis

7 de Septiembre del 2022

Consulta, como podría centrar el slide en la web y cambiar el tamaño de la imagen?

Responder

fer

6 de Octubre del 2022

funciona,

Para los que preguntan como cambiar el tamaño de imagen esta es una idea:

se agrega una clase para la imagen en la seccion de html:

<a href="" id="link"><img img class="presenta" src="" id="imagen"></a>

y de preferencia desde un archivo css se da tamaño a las imagenes, por ejemplo:

.presenta{
left: 320px;
top:10px;
position: absolute;
height: 250px;
width: 300px; /* Ancho de recuadro*/
margin-left: 60px;

}

Responder