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