SlideShow simple (2)

Esta rutina crea un slideshow similar a la mostrada anteriormente pero efectuando un desplazamiento horizontal (se van desplazando de derecha a izquierda). También pueden colocarse cualquier cantidad de imágenes y establecer una velocidad.

Para implementarla, debemos cargar el archivo JavaScript (es aconsejable alojarlo en un servidor externo si vamos a utilizar la rutina varias veces, sino, basta copiar el código en el HEAD de la página). En cualquier caso:

<script type="text/javascript" src="URL_SlideshowSimpleV2.js"></script>

Luego, en cualquier parte donde se quiera mostrar, insertamos el siguiente script:

<script type="text/javascript">
mtx2IMG[0]="URL_imagen_1",
mtx2IMG[1]="URL_imagen_2",
.......
mtx2IMG[n]="URL_imagen_n";
slideshowV2(ancho,velocidad);
</script>

donde velocidad es un numero positivo (0 = velocidad máxima); ancho es el ancho que va a tener el slideshow, en este ejemplo es igual al ancho de las imágenes pero puede ser cualquier otro y URL_imagen es la lista de imágenes a mostrar.

Como siempre, en el caso de Blogger, para insertarse dentro de un post, todo debe ser escrito en una sola línea para evitar que aparezcan saltos de línea indeseados.

Este es el código de la rutina JavaScript:

// *** SlideshowSimpleV2.js ***

var velocidad; // velocidad (mayor valor = mayor velocidad)
var mtx2IMG=new Array(); // lista de imágenes

function slideshowV2(elAncho,AUXvelocidad) {
velocidad=AUXvelocidad;
var etiqueta='';
// bucle crear las etiquetas A e IMG con el contenido de las URLs de cada imagen
for (i=0;i<mtx2IMG.length;i++)
etiqueta=etiqueta+"<a href='javascript:void(0);'><img src="+mtx2IMG[i]+" border=0></a>";     
// escribir la etiqueta MARQUEE de manera dinámica
document.write('<marquee id="deplazaV2" scrollAmount="'+velocidad
+'"style="width:'+elAncho+'px;">'+etiqueta+'</marquee>');
}

// *** final del script ***