He encontrado aquí un ejemplo de código que permite mostrar alternativamente un número indeterminado de imágenes. El sencillo ejemplo se ajusta al número de imágenes que queramos.
Tiene un pequeño problema, y es que si las imágenes son de distitas alturas las página se desplazará verticalmente (como sucede en el ejemplo) haciendo la lectura de la misma bastante incómoda.
Una posible solución sería añadir estas líneas al fichero JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var altura = 0; function inicializar() { imagen = new Image(); for(i=0;i<bannerImg.length;i++) { document.banner.src = bannerImg[i]; alert(document.banner.height); if (altura<document.banner.height) altura = document.banner.height; } cycleBan(); } |
y sustituir:
window.onload=cycleBan;
por:
window.onload=inicializar;
La función inicializar calcula la altura máxima de las imágenes y la almacena en la variable «altura». Este valor podría usarse para establecer la altura de la capa o celda de una tabla que contenga las imágenes.
Actualización: Añado aquí el código por si lo borran [Fuente: The JavaScript Source]
|
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 46 |
<!-- Paste this code into an external JavaScript file named: banner.js.js --> /* This script and many more are available free online at The JavaScript Source :: http://javascript.internet.com Created by: Lee Underwood :: http://javascript.internet.com/ */ var bannerImg = new Array(); // Enter the names of the images below bannerImg[0]="image_jss.gif"; bannerImg[1]="image_js.gif"; bannerImg[2]="image_wr.gif"; var newBanner = 0; var totalBan = bannerImg.length; function cycleBan() { newBanner++; if (newBanner == totalBan) { newBanner = 0; } document.banner.src=bannerImg[newBanner]; // set the time below for length of image display // i.e., "4*1000" is 4 seconds setTimeout("cycleBan()", 4*1000); } window.onload=cycleBan; <!-- Paste this code into the HEAD section of your HTML document. You may need to change the path of the file. --> <script type="text/javascript" src="banner.js.js"></script> <!-- Paste this code into the BODY section of your HTML document --> <img src="image_jss.gif" name="banner"> <p><div align="center"> <font face="arial, helvetica" size"-2">Free JavaScripts provided<br> by <a href="http://javascriptsource.com">The JavaScript Source</a></font> </div><p> |
Gracias