Slide show de imágenes

Te mostramos cómo realizar un slide show de imágenes en secuencia una con otra encadenadas con un fundido negro.

Para ello debemos ubicar el siguiente código dentro de la cabecera (entre <head> y </head>):

<script language="JavaScript">
// Browser Slide-Show script.
// With image cross fade effect for those browsers that support it.
var slideCache = new Array();
function RunSlideShow(pictureName,imageFiles,displaySecs)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
if (document.all)
{
document.getElementById(pictureName).style.filter="blendTrans(duration=2)";
document.getElementById(pictureName).filters.blendTrans.Apply();
}
document.getElementById(pictureName).src = nextImage;
if (document.all)
{
document.getElementById(pictureName).filters.blendTrans.Play();
}
var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)
+ ‘;’ + nextImage;
setTimeout("RunSlideShow(‘"+pictureName+"’,'"+futureImages+"’,"+displaySecs+")",
displaySecs*1000);
// Cache the next image to improve performance.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
if (slideCache[nextImage] == null) {
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
</script>

Y donde queramos ubicar el slide ubicamos las siguientes líneas:

<img border="1" src="foto1.jpg" width="271" height="250" id="Fotos">
<script language="JavaScript">
RunSlideShow("Fotos","foto1.jpg;foto2.jpg;foto3.jpg;foto4.jpg;"
+ "foto5.jpg",5);
</script>

Ejemplo:

Deja un comentario