Nideaderedes

Alternar imágenes con JavaScript

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:

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]

/* 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;











Free JavaScripts provided
by The JavaScript Source

Entradas relacionadas

1. Números aleatorios en JavaScript
2. Javascript: pedir al usuario confirmación de una acción
3. Buscar la posición de un objeto con Javascript
4. Cambiar el tamaño de un grupo de imágenes en Ubuntu
5. Introducción a Google Maps (II)