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(40)
Actualizado el 09 de Septiembre del 2015 por Xavi (Creado el 21 de Abril del 2014)
27.384 visualizaciones desde el 21 de Abril del 2014. Una media de 203 por semana
Simple código que muestra como cambiar una imagen de nuestra pagina de cada 5 segundos por otra imagen de forma aleatoria.

Versión 1
estrellaestrellaestrellaestrellaestrella(40)

Actualizado el 09 de Septiembre del 2015 (Creado el 21 de Abril del 2014)gráfica de visualizaciones de la versión: Versión 1
27.385 visualizaciones desde el 21 de Abril del 2014. Una media de 203 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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 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 (40)

Anonimo
29 de Octubre del 2014
estrellaestrellaestrellaestrellaestrella
Muchas gracias. Funciona a la perfeccion! =)
Responder
César
16 de Febrero del 2015
estrellaestrellaestrellaestrellaestrella
excelente
Responder
Josue Ramos
09 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
Como se guarda y que necesita para que se vea
Responder
Imágen de perfil
Xavi
09 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
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
Roberto
21 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
Funciona a la primera!
Responder
Francisco
16 de Junio del 2015
estrellaestrellaestrellaestrellaestrella
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
Imágen de perfil
Xavi
17 de Junio del 2015
estrellaestrellaestrellaestrellaestrella
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
Marco
24 de Julio del 2015
estrellaestrellaestrellaestrellaestrella
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
Imágen de perfil
Xavi
09 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
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
Fernando
08 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
que podría hacer para que en vez de random sea consecutivo?
Responder
Miguel
16 de Septiembre del 2015
estrellaestrellaestrellaestrellaestrella
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
03 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
conseguiste como hacerlo? tambien tengo la duda
Responder
Raquel
05 de Noviembre del 2015
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
hola, prueba cambiando el nombre de las id=""
Responder
Ayudando
28 de Febrero del 2016
estrellaestrellaestrellaestrellaestrella
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
06 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
gracias, justo lo que queria
Responder
Pacco
06 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
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
06 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
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
David
06 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
muy buen aporte. :)
Responder
jir
11 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
como se puede colocar al centro las imagenes
Responder
ayudando
20 de Abril del 2016
estrellaestrellaestrellaestrellaestrella
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
04 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
como cargar el script en la imagen del background de la página web, saludos.
Responder
daniel
06 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
gracias
Responder
daniel
09 de Mayo del 2016
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
G
05 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
se puede poner más de una imagen en el body? pero que todas se vayan rotando
Responder
agustin
07 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
como hago para q funcione dos veces en la misma pag?
Responder
Luis
29 de Junio del 2016
estrellaestrellaestrellaestrellaestrella
Como hago para que las imagenes no sean aleatorias, quiero que se muestren consecutivamente
Responder
J.Luis
03 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Muchas gracias por el código. ¿Y si hubiese un nombre asociado a cada imagen?.
Saludos.
Responder
kate
17 de Agosto del 2016
estrellaestrellaestrellaestrellaestrella
como hago para que se vean las imagenes
Responder
DAYANA CASTILLO
08 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
el codigo funciona perfectamente pero si repito el proceso no me funciona si no una sola
Responder
sergio
18 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
¿Se podía hacer que cada imgane enlance a una url? Gracias
Responder
ricardo
21 de Septiembre del 2016
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
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
estrellaestrellaestrellaestrellaestrella
Muchas gracias. Creo que al final de functio(){} me recomendaba poner ;
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2654