Barraquito.net

Para una web con la que estoy queríamos mostrar una serie de imágenes, pero sin que saliese toda la lista, sino una por una. Como me he empeñado en procurar hacerlo todo lo más estandar posible me puse manos a la obra y esto es lo que me salió.

Adevertencia: no funcion en Explorer. Dejemoslo como mi reto del fin de semana, aunque cualquier indicación al respecto será bienvenida.

Lo primero, lo que yo voy a mostrar en una lista de imágenes, así que metí las imágenes que quería en una lista tal que así:

<ul id="slide">
	<li id="act"><img src="photo1.jpg" /></li>
	<li><img src="photo2.jpg" /></li>
	<li><img src="photo3.jpg" /></li>
</ul>

El id="slide" marcará el carrusel (slideshow) y el id="act" la imagen que se está mostrando al inicio.

Para cambiar de una imagen a otra, es decir, quitarle el atributo id="act" a la que la tiene al principio y ponersela a la que querramos mostrar, no creo que haya otra solución más que JavaScript. Ya que lo uso (no me gusta demasiado la verdad, pero al fin y al cabo para algo está) tiro del DOM, que según tengo entendido es de lo más estándar que hay para estas cosas.

Así me creo un par de funciones, que no serán perfectas (las acabo de hacer en dos minutos) pero que de momento funcionan con el código anterior.

function prevImg() {
	// coge los elementos de la lista
	slideImgs = document.getElementById("slide").getElementsByTagName("li");
	// busca el activo, lo desactiva y activa el anterior
	for (var i = 0; i < slideImgs.length; i++) {
		if (slideImgs[i].attributes.getNamedItem("id")) {
			slideImgs[i].removeAttribute("id");
			if ((--i) >= 0) slideImgs[i].setAttribute(”id”, “act”);
			else slideImgs[slideImgs.length - 1].setAttribute(”id”, “act”);
			exit;
		}
	}
}

function nextImg() {
	slideImgs = document.getElementById(”slide”).getElementsByTagName(”li”);
	// busca el activo, lo desactiva y activa el siguiente
	for (var i = 0; i < slideImgs.length; i++) {
		if (slideImgs[i].attributes.getNamedItem("id")) {
			slideImgs[i].removeAttribute("id");
			if ((++i) < slideImgs.length) slideImgs[i].setAttribute("id", "act");
			else slideImgs[0].setAttribute("id", "act");
			exit;
		}
	}
}

Como es lógico, nextImg() pasará a la siguiente imágen y prevImg() a la anterior.

Ahora sólo basta con asociar estas funciones a dos enlaces sobre los que pulsar para que actúen, como estos:

<a href="#" onClick="prevImg();">Anterior</a>
<a href="#" onClick="nextImg();">Siguiente</a>

Y asociar los estilos adecuados a lo que hemos hecho:

ul { margin: 0; padding: 0; list-style-type: none; }
li { display: none; }
li#act { display: list-item; }

Con esto está listo… es mucho más fácil de lo que pensé que sería. De todos modos está claro que se puede mejorar… cualquier sugerencia es siempre bienvenida y se tomará en cuenta