Cambiar imagen cada X segundos

manumaf · #1 (**permalink**) 15/06/2011, 18:20

Hola tengo una etiqueta <img> y quiero que la imagen que contiene se cambia cada x segundos, me canse de buscar algun codigo ya escrito ya que no se de javascript y ninguno me funciona, alguien me pasa alguno?

Naahuel · #2 (**permalink**) 15/06/2011, 19:14

Acá tenés un ejemplo sencillo:

Tenés que editar la variable "tiempo" y el array de imágenes.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script>
function rotar_imagen(){
  var tiempo = 1000;//tiempo en milisegundos
  var arrImagenes = ['http://3.bp.blogspot.com/_bVS2bdfO4As/RkvjtoibTxI/AAAAAAAAAso/c1Y93BkfBrs/s320/01_HomerSimpson.gif','http://www.seeklogo.com/images/H/Homer_Butt_Homero_Trasero-logo-807B1B6A2E-seeklogo.com.gif', 'http://2.bp.blogspot.com/__UX7GOPM7wI/SeAOEWkWsWI/AAAAAAAAAWQ/0xaOwEIue_I/s200/Homer_Simpson.png'];
  
  _img = document.getElementById('rotativo');
  
  //cargar la 1er imagen
  _img.src = arrImagenes[0];
  var i=1;
  setInterval(function(){
    _img.src = arrImagenes[i];
    i = (i == arrImagenes.length-1)? 0 : (i+1);
  }, tiempo);
}
</script>
</head>
<body onload="rotar_imagen();">
  <img id="rotativo"  />
</body>
</html>

josnan40 · #3 (**permalink**) 24/01/2012, 13:50

Este script es muy bueno, se le podria añadir un enlace a cada imagen,

DavoDbdz · #4 (**permalink**) 28/02/2012, 11:21

Hola,

Yo en java tampoco soy un experto...mas bien un "dummy"...este script me ha parecido perfecto...lo único sabría alguien decirme como ponerle un enlace a las imágenes....muchas gracias de ante mano.

Naahuel · #5 (**permalink**) 28/02/2012, 14:12

Y estimo que podrías usar algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<script>
function rotar_imagen(){
* var tiempo = 1000;//tiempo en milisegundos
    var arrImagenesMiniatura = [
        'http://3.bp.blogspot.com/_bVS2bdfO4As/RkvjtoibTxI/AAAAAAAAAso/c1Y93BkfBrs/s320/01_HomerSimpson.gif',
        'http://www.seeklogo.com/images/H/Homer_Butt_Homero_Trasero-logo-807B1B6A2E-seeklogo.com.gif', 
        'http://2.bp.blogspot.com/__UX7GOPM7wI/SeAOEWkWsWI/AAAAAAAAAWQ/0xaOwEIue_I/s200/Homer_Simpson.png'
    ];
    var arrImagenesGrandes = [
        'http://3.bp.blogspot.com/_bVS2bdfO4As/RkvjtoibTxI/AAAAAAAAAso/c1Y93BkfBrs/s320/01_HomerSimpson.gif',
        'http://www.seeklogo.com/images/H/Homer_Butt_Homero_Trasero-logo-807B1B6A2E-seeklogo.com.gif', 
        'http://2.bp.blogspot.com/__UX7GOPM7wI/SeAOEWkWsWI/AAAAAAAAAWQ/0xaOwEIue_I/s200/Homer_Simpson.png'
    ];
* 
* _a = document.getElementById('imagen-rotativo');
  _img = _a.appendChild(document.createElement("img"));
  
* 
* //cargar la 1er imagen
* _img.src = arrImagenesMiniatura[0];
* var i=1;
* setInterval(function(){
* * _img.src = arrImagenesMiniatura[i];
* * _a.href = arrImagenesGrandes[i]; //link a imagen mas grande
* * i = (i == arrImagenesMiniatura.length-1)? 0 : (i+1);
* }, tiempo);
}
</script>
</head>
<body onload="rotar_imagen();">
* <a id="imagen-rotativo" href="#"></a>
</body>
</html>

Ahora tenés dos arreglos, uno para las imagenes miniatura y el otro para las grandes. Se entiende que deben tener la misma cantidad de elementos y que el elemento 1 de las miniaturas corresponde al elemento 1 de las grandes y así.

Este código no me gusta nada. Usamos enmarcado en el html, es poco mantenible, los arreglos así separados son difíciles de cargar con un lenguaje en el servidor, etc.

DavoDbdz · #6 (**permalink**) 29/02/2012, 03:08

Muchas gracias Naahuel por tu super codigo java...GRACIASSSS!!!!!!!...
yo tambien he conseguido hacer algo...y me funciona...que es lo que mas me sorprende.

Código HTML:

Ver original<script>
function rotar_imagen(){
  var tiempo = 5000;//tiempo en milisegundos
  var arrImagenes = ['xxxxxxx.jpg','xxxxxxx.png', 'xxxxxxx.png'];
  var arrhref = ['http://www.xxxxxxx.com','http://www.xxxxxxx.com', 'http://www.xxxxxxx.com']
  
  _img = document.getElementById('rotativo');
  _a = document.getElementById('rotativos');
  
  //cargar la 1er imagen
  _img.src = arrImagenes[0];
  _a.href = arrhref[0];
  var i=1;
  var y=1;
  setInterval(function(){
    _img.src = arrImagenes[i];
    _a.href = arrhref[y];
    i = (i == arrImagenes.length-1)? 0 : (i+1);
    y = (y == arrhref.length-1)? 0 : (y+1); 
  }, tiempo);
}
</script>
 
-------------------------
 
<a id="rotativos" target="_blank"><img id="rotativo"  /></a>

Ya os digo...puede que haya algo que no se necesite en el código ya que no tengo mucha idea de JAVA...pero me funciona..JEJEJE.

MUCHAS GRACIAS POR TU COLABORACIÓN NAAHUEL!!!!!

juanchosim · #7 (**permalink**) 24/05/2013, 08:27

Hola... El codigo me funciono perfecto pero necesito q las imagenes ocupen todo el ancho de la pantalla...
Como con estos codigos:

width="100%" height=""

Pero no se como ponerlos en el codigo

Gracias

DavoDbdz · #8 (**permalink**) 27/05/2013, 02:28

Hola juanchosim

He probado una cosa así rápidamente y creo que esto te puede funcionar... creas en CSS lo siguiente:

Código HTML:

<style type="text/css">
img{max-width:100%}
</style>

y cuando crees la imagen la creas de un tamaño superior al ancho normal de las pantallas...yo por ejemplo he creado una img de ancho 2000 px y alto el que sea y al aplicar este css la imagen se me ha re dimensionado a 1407px de ancho (al visualizarlo en el navegador), es decir se me ha ajustado al ancho de mi navegador.

Espero te sirva, salud2

DavoDbdz · #9 (**permalink**) 27/05/2013, 02:30

Cita:

Iniciado por juanchosim

Hola... El codigo me funciono perfecto pero necesito q las imagenes ocupen todo el ancho de la pantalla...
Como con estos codigos:

width="100%" height=""

Pero no se como ponerlos en el codigo

Gracias

Hola juanchosim

He probado una cosa así rápidamente y creo que esto te puede funcionar... creas en CSS lo siguiente:

Código HTML:

Ver original<style type="text/css">
img{max-width:100%}
</style>

y cuando crees la imagen la creas de un tamaño superior al ancho normal de las pantallas...yo por ejemplo he creado una img de ancho 2000 px y alto el que sea y al aplicar este css la imagen se me ha re dimensionado a 1407px de ancho (al visualizarlo en el navegador), es decir se me ha ajustado al ancho de mi navegador.

Espero te sirva, salud2