domingo, 28 de octubre de 2007Lo que vamos a hacer en este post es algo parecido a lo que explicamos hace ya un tiempo sobre cómo poner imágenes aleatorias en Blogger, pero en este caso, la imagen que aparezca, irán cambiando cada cierto tiempo, formando lo que llamamos una presentación de imágenes, carrusel, o slideshow.
La imagen inicial será aleatoria, así que necesitaremos la función "aleatorio" que ya creamos la otra vez:
function aleatorio(inf,sup){
numP = sup - inf;
rnd = Math.random() * numP;
rnd = Math.round(rnd);
return parseInt(inf) + rnd;
} A continuación tendremos que indicar una lista de imágenes:
var imagenes =
new Array('http://direccion/a/la/imagen1.jpg',
'http://direccion/a/la/imagen2.jpg',
'http://direccion/a/la/imagen3.jpg',
'http://direccion/a/la/imagen4.jpg'
);
Y finalmente el código que pondremos allí donde queramos que aparezcan las imágenes:
var segundos = 10;
var num = aleatorio(0,imagenes.length-1);
document.write("%lt;img src='"+imagenes[num]+"' id='carrusel' />");
setInterval('imgchange()',segundos*1000);
function imgchange() {
num = (num+1)%imagenes.length;
document.getElementById('carrusel').src = imagenes[num];
}
Se puede cambiar fácilmente la velocidad a la que queremso que cambien las imágenes modificando la variable "segundos". Ahora mismo está puesto a 10 segundos.
Puedes descargar el código completo.
by Nenillo
