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.035 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

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 que se iran mostrando en la web

*/

    var imagenes=new Array(

        'img/1.jpg',

        'img/2.jpg',

        'img/3.jpg',

        'img/4.jpg'

);

/**

    * Funcion para cambiar la imagen

*/

    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

        document.getElementById("imagen").src=imagenes[index];

/**

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

<img src="" id="imagen">

</body>

</html>

Comentarios sobre la versión: Versión 1 - Sin enlace aleatorio (69)

Anonimo

29 de Octubre del 2014

Muchas gracias. Funciona a la perfeccion! =)

Responder

JOHANA

2 de Junio del 2017

hola que puedo hacer si ya copie el codigo y no veo ningun cambio,podrias decirme si debo eliminar o agregar algo mas xf

Responder

César

16 de Febrero del 2015

excelente

Responder

Josue Ramos

9 de Mayo del 2015

Como se guarda y que necesita para que se vea

Responder

Xavi

9 de Septiembre del 2015

Simplemente tienes que generar un archivo del tipo pagina.html y copiar en su interior el código.
También tienes que crear una carpeta "/img/" y poner dentro las 4 imágenes, denominadas 1.jpg hasta 4.jpg

Si tienes cualquier problema coméntame, ok?

Responder

JOHANA

2 de Junio del 2017

HOLA YA COPIE EL CODIGO EN MI PAGINA Y TENGO LAS IMAGENES EN MI CARPETA PERO NO ME DA NINGUN CAMBIO. PODRIAS AYUDARME POR FAVOR.

Responder

Antonio

24 de Agosto del 2017

Hola Johana. Mira si las imagenes estan en .jpg o png o cualquier otro formato, de ser así lo unico que tendras que hacer es cambiar en el código .jpg por el formato que este cada una de las imágenes. Espero que te sirva. Saludos.

Responder

Roberto

21 de Mayo del 2015

Funciona a la primera!

Responder

Francisco

16 de Junio del 2015

hola, si incorpora las imagenes en la misma carpeta donde esta la pagina las fotos las cargan, pero si dejo las fotos en una carpeta no las muestra, use el siguiente codigo:

var imagenes=new Array(

        '\fotos\k-01.jpg',

        '\fotos\k-02.jpg',

        '\fotos\k-03.jpg',

        '\fotos\k-04.jpg'

);

realice varios cambios sin \ antes de "fotos", y nada, si alguien me puede ayudar se agradece.

Responder

Xavi

17 de Junio del 2015

Hola Francisco, las barras están al revés... en vez de \ tienes que ser esta:/

Si pones la barra al inicio, te empezara desde la raiz de la web.

Responder

christian

21 de Junio del 2017

'E:\img/1.jpg '
tienes q poner la unidad donde has creado la caperta img en la mia yo la cree en la unidad E

Responder

Marco

24 de Julio del 2015

tengo 30 y mas y mas imágenes al cargar la web solo funciona con la primera quiero que vallan cambiando todas como lo hago para que se roten

Responder

Xavi

9 de Septiembre del 2015

Hola Marco, solo tienes que añadirlas al array de valores: var imagenes=new Array(...);

De forma automática, cogerá las imágenes y las ira rotando.

Responder

ramiro

7 de Enero del 2017

Perdon una consulta, como doy el tamaño a las imagenes por ejemplo quisiera que sea de 200 de ancho y 100 de alto?

Responder

Brayan

29 de Enero del 2017

con width(ancho) y height (altura)

Responder

Fernando

8 de Septiembre del 2015

que podría hacer para que en vez de random sea consecutivo?

Responder

Miguel

16 de Septiembre del 2015

Modificando un poco el script de Xavi:

var indice = 0;

$(document).ready(function() {

    rotarImagenes();

    setInterval(rotarImagenes,5000);

});

var imagenes = new Array(

   'img/mislider/1.jpg',

   'img/mislider/2.jpg',

   'img/mislider/3.jpg',

   'img/mislider/4.jpg');

function rotarImagenes()

    document.getElementById("jm-imagen").src=imagenes[indice];

    indice++;

    if (indice==4) { indice = 0; };

Muchas gracias Xavi, por tus scripts son muy buenos...

Responder

dennis eduardo

3 de Julio del 2016

conseguiste como hacerlo? tambien tengo la duda

Responder

Raquel

5 de Noviembre del 2015

Buenos días, he colocado el script en mi página de inicio, es estupendo, pero tarda unos 10 segundos en cargar, se queda en blanco hasta que empiezan a pasar las fotos. Sólo he colocado 4 imágenes cambiantes.
¿Podrías ayudarme por favor?
Gracias.

Responder

javier Rios

10 de Diciembre del 2015

Saludos lo que te pasa es que en la primera carga de la pagina de inicio debes mandar a cargar una imagen al inicio con este codigo

<img id="img" src="image3.jpg"/>

Responder

Luis Miguel Flores

15 de Enero del 2016

Hola,

¿Podrían ayudarme por favor?

Me encuentro añadiendo este codigo en un mismo archivo *.html, en el cual tuve que replicar tres veces este script, sobre tres "BOX" por lo que solamente me muestra el cambio de imagenes sobre el último generado, es decir sobre el tercero.

Necesito que los otros dos primeros "BOX" también cambien.

Saludos.

Responder

ayudando

29 de Febrero del 2016

hola, prueba cambiando el nombre de las id=""

Responder

Ayudando

28 de Febrero del 2016

Gracias Xavi, por tu aporte. Quizás alguien se interese por esta breve modificación

<html>

<head>

<script>

	// Array con las imagenes que se iran mostrando en la web

    var imagenes=new Array(

             'img/1.jpg',

        'img/2.jpg',

        'img/3.jpg',

        'img/4.jpg'

);

	var x=0;

	setInterval(function () {

        // cambiamos la imagen de manera sucesiva

        document.getElementById("imagen").src=imagenes[x++%imagenes.length];

	},3000);

</script>

</head>

<body>

<img src="" id="imagen">

</body>

</html>

Responder

daniel

6 de Mayo del 2016

gracias, justo lo que queria

Responder

Pacco

6 de Junio del 2016

Xavi, tu código es magnífico, pero sólo me funciona con cuatro imágenes. si le pongo más, no me muestra ninguna.¿Por qué será?

Responder

Pacco

6 de Junio del 2016

Perdona Luis miguel, pero la pregunta era para ti:
tu código va fantástico, pero si le pongo mas de 4 imagenes no sale ninguna: ¿por qué es y cómo puedo solucionarlo?

Responder

Chryss

23 de Marzo del 2017

Genial! Esta perfecto tu codigo

Responder

hardman

24 de Abril del 2018

Solo te falta el link a url...

Responder

David

6 de Abril del 2016

Hola,

¿Cómo puedo hacer para utilizar el script en varias imágenes de una misma página?

Gracias.

Responder

ayudando

20 de Abril del 2016

Hola, prueba colocándolo en diferentes div, es decir, por ejemplo:

<body>

<div style="position:absolute;z-index:-1;left:50px;top:20px">

<script>..........</script>

</div>

<div style="position:absolute;z-index:-2;left:250px;top:120px">

<script>..........</script>

</div>

</body>

....

Creo que andará bien, suerte

Responder

ayudando

20 de Abril del 2016

Aquí dejo otra variación, el script con una secuencia de imágenes en distinta ubicación. Quizás sea lo que buscas, saludos

<html>

<body>

<script>

// Arrays con diferente imagen y ubicación que se iran mostrando en la web

var imageness=new Array(

       'img/1.jpg',

        'img/2.jpg',

        'img/3.jpg',

        'img/4.jpg'

);

var imagenes=new Array(

       'img/5.jpg',

        'img/6.jpg',

        'img/7.jpg',

        'img/8.jpg'

);

var x=0;

var y=0;

setInterval(function () {

// cambiamos la imagen de manera sucesiva en ambas variables de imágenes

document.getElementById("imagen").src=imageness[x++%imageness.length];

document.getElementById("image").src=imagenes[y++%imagenes.length];

},3000);

</script>

<img src="" id="image" style="position:absolute;z-index:-1;left:50px;top:20px">

<img src="" id="imagen" style="position:absolute;z-index:-2;left:650px;top:120px">

</body>

</html>

Responder

thanks

11 de Abril del 2016

muy buen aporte. :)

Responder

jir

11 de Abril del 2016

como se puede colocar al centro las imagenes

Responder

ayudando

20 de Abril del 2016

Mira prueba a través de esta opción:

........

<body>

<img src="" id="imagen" style="margin-top:100px;margin-left:100px">

</body>

</html>

El valor que puse es arbitrario(100), puedes ajustarlo a tu necesidad
Saludos.-

Responder

jose manuel

4 de Mayo del 2016

como cargar el script en la imagen del background de la página web, saludos.

Responder

daniel

6 de Mayo del 2016

gracias

Responder

daniel

9 de Mayo del 2016

se puede hacer que las imágenes pasen pero suaves y no tan bruscas, algún efecto??
:D

Responder

jose

25 de Mayo del 2016

hola, me podrian ayudar con un problema.
me podrian ayudar que la imagen cambie dependiendo de una cierta variable, no dandole click a la imagen ( digamos 1,2 o 3)

miuchas gracias

Responder

5 de Junio del 2016

se puede poner más de una imagen en el body? pero que todas se vayan rotando

Responder

agustin

7 de Junio del 2016

como hago para q funcione dos veces en la misma pag?

Responder

Luis

29 de Junio del 2016

Como hago para que las imagenes no sean aleatorias, quiero que se muestren consecutivamente

Responder

J.Luis

3 de Julio del 2016

Muchas gracias por el código. ¿Y si hubiese un nombre asociado a cada imagen?.
Saludos.

Responder

kate

17 de Agosto del 2016

como hago para que se vean las imagenes

Responder

DAYANA CASTILLO

8 de Septiembre del 2016

el codigo funciona perfectamente pero si repito el proceso no me funciona si no una sola

Responder

sergio

18 de Septiembre del 2016

¿Se podía hacer que cada imgane enlance a una url? Gracias

Responder

ricardo

21 de Septiembre del 2016

perfecto.. como dijo una persona comentarios arriba.. como se le puede agregar un efecto para que no cambie tan seco y solido?... que se vea que entra y sale cada imagen con un efecto.. saludos

Responder

Leydy jave

12 de Octubre del 2016

Hola, el ejemplo se ve muy practico.., pero como hago para que las fotos son traidas de una consulta de base de datos .. claro las fotos estan alojadas en el servidor es una carpeta y de nombre tiene el id del registro. Por favor ayudenme.

Responder

Jorge

22 de Noviembre del 2016

Muchas gracias. Creo que al final de functio(){} me recomendaba poner ;

Responder

juan

13 de Diciembre del 2016

Gracias !!! me funciona de maravillas :)

Responder

franco

6 de Enero del 2017

amigos para que rota la imagen cada hora con su minutos como hago.

Responder

rene

28 de Febrero del 2017

hola amigo es justo lo que andaba buscando esta genial tu cogido, solo tengo una duda tengo que escribir cada imagen una por una en el codigo??

no hay alguna manera de poner solo la caperta de imagenes y ya? . porque constantemente estoy descargando imagenes y todas las coloco en la misma carpeta y no me gustaria estrar modificando el codigo tantas veces

saludos

Responder

ernesto

13 de Marzo del 2017

anda de 10 pero solo con mozilla..por que no lo abre con otros navegadores?

Responder

Xavi

13 de Marzo del 2017

Lo acabo de probar con Chrome y Edge, y me ha funcionado!!!
A que otro navegador haces referencia?

Responder

ernesto

13 de Marzo del 2017

Gracias!!!!!!!!!!!!!!!!!! debe ser alguno de mis navegadores q estan desactualizados. muchas gracias!

Responder

ernesto

13 de Marzo del 2017

Encontre el problema!! no tengo ni idea de nada ja. quiero hacer pagina para un blog, es de una escuela.. insertar un fondo para la web y que las imagenes se muestren en abajo, en el centro y no ocupen todo el ancho de la pagina. no tengo mucha idea y se me podes ayudar seria buenisimo. gracias

Responder

Gabriel

22 de Marzo del 2017

Como podria centrar las imagenes en ese script?

Responder

Miguel

24 de Marzo del 2017

estoy intentando hacer una funcion on mouse over para asi detener la animacion pero no logro realizarla, una ayuda por favor

Responder

Miguel

24 de Marzo del 2017

Intenta indicarlo en la imagen o en el codigo css en mi caso yo las tengo posicionadas por medio de css

Responder

Raul

7 de Abril del 2017

Buneas, estoy tratando de implementar el codigo en un js externo, y llamarle desde el html, pero no consigo llamar a la funcion onload desde el html. Me puede ayudar alguien?

Responder

Yacoobs

9 de Junio del 2017

Esta muy bien yo lo he modificado a mi gusto y funciona perfectamente Saludos un buen aporte.

Responder

rodrigo reyes

23 de Junio del 2017

lo que quiero yo es con un codigo includes ponerlo ponerlo en la hoja principal como tendra que hacerlo

Responder

jerinson

5 de Julio del 2017

como lo lllevo al centro d ela pagina

Responder

Wladimir

15 de Julio del 2017

Hola buenas cuando lo subo al servidor no se alterna la imagen, solo funciona cuando lo ejecuto local

Responder

Carlos

22 de Agosto del 2017

hola quiero hacer esto en un landing page que tengo pero no e podido alguien me ayuda porfavor se lo sabre agradecer y si me cobra tambienestoy dispuesto a pagar pero no exageradamente este esmi whatsapp 04121125973

Responder

Xavi

23 de Agosto del 2017

Hola Carlos, publica tu codigo en el foro de JavaScript explicando el problema y te ayudo sin problema.

Responder

carlos

23 de Agosto del 2017

hola XAVI, te explico tengo una landing page o pagina de aterrizaje que consta de dos paginas principal y secundaria en la pagina secundaria me gustaria poner una imagen debajo de un boton de descargar, no busco que la imagen cambie cada 5 segundos lo que quiero es que la imagen cambie cada vez que se recargue la pagina o a su vez cada vez que una persona entre en la pagina la imagen no sea la misma si me puedes ayudar porfavor no se mucho de esto de codigos se lo basico te dejo mi correo [email protected]

Responder

Gabriel Baudi

11 de Septiembre del 2017

Hola! no encuentro la forma de ponerles un link a cada imagen. Como prodria ser???
Gracias

Responder

Walter Olivera

28 de Abril del 2020

Colega de verdad que eres la leche.
He utilizado tu código con algunas de las variaciones que enumeras aquí como tamaño y ancho de las imágenes y me ha funcionado de maravillas.
Quiero que conste que no soy muy conocedor de esto de programación web.
solo agregué el siguiente código para hacerlo responsive:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Luego bajo la etiqueta <body>

puese esto:

<img src="images" id="imagen" style="margin-top:100px;margin-left:100px" width="1200" height="296">

y me ha funcionado de perlas.

Gracias por el aporte colega

Saludos desde Cuba

Responder

Issar

19 de Diciembre del 2021

Hola yo quisiera que un grupo de 12 imágenes roten una por día hasta terminarse y luego comience de nuevo la primera y así sucesivamente.
Necesito que lo haga en un horario determinado del día o a las 0 hs. Será posible algo así?

Responder