Slideshow

En este caso un "clon" de Electricprism

El resultado podéis verlo bajo las entradas de Mi blog de pruebas

En comparación con otras cosas que vemos or aquí y por allá, es "modestito". Pero las transiciones son muy suaves y me gusta mucho el resultado (aunque sacarlo adelante ha sido tarea endiablada... de fácil no tuvo nada).

.- SCRIPTS:
Hacemos un link al CSS y colocamos el inevitable Mootools, además del js del slideshow:

<script src='http://.../mootools-release-1.11.js' type='text/javascript'/>

<link href='http://.../slideshow1.css' media='screen' rel='stylesheet' type='text/css'/>

<script src='http://.../slideshow.rc1.packed.js' type='text/javascript'/>

.- HTML:

<div class='slideshow' id='my_slideshow'><img alt='Mapa' height='300' src='http://.../Mapapirata.jpg' width='400'/></div><script language='JavaScript'>

myShow = new Slideshow(&#39;my_slideshow&#39;, {type: &#39;combo&#39;, resize: true, duration: [2000, 4000], width: 400, height: 300, hu: &#39;&#39;, images:

[&#39;<image_folder/>&#39;,&#39;http://...Paisajes1.jpg&#39;,

&#39;http://...naranja.JPEG&#39;,&#39;http://.../Rama.jpg&#39;,

&#39;http://.../ElJuego.jpg&#39;,&#39;http://.../gtiger1.jpg&#39;,

&#39;http://.../leop3.jpg&#39;,&#39;http://.../mamaBebe.jpg&#39;,

...etc...
&#39;http://.../Cuentos4.jpg&#39;,&#39;http://.../Calvin.JPG&#39;]});

</script>

</div>

La primera imagen es la "señal" para el slideshow: el fondo del mismo. Son las demás las que veréis deslizarse con las "instrucciones que véis en el código anterior respecto a la duración, al tipo de transición, el ancho y alto, etc (que, evidentemente, podéis cambiar: echadle un ojo a la página original del hack).

Y eso es todo...