Mas de un rotator javascript

[raul_romero]

Hola amigo, no es nada dificil es simple, practicamente no tienes nada que escribir:

Pones en el encabezado los js (El jquey y innerfade)

Si estan junto a tu pagina en el src del script solamente escribes "jquery.js" si estan en una carpeta escribes "carpeta/jquery.js", en mi caso siempre los pongo en una carpeta js.

Código HTML:

<script language="javascript" type="text/javascript" src="js/main.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.innerfade.js"></script>
 

Luego en un contenedor div colocas las imagenes que vas a utilizar en una lista utilizando ul y li, a este ul dale un id por ejemplo lista.

Código HTML:

<ul id="lista">
<li><img src="images/rio.gif" alt="Good Guy bad Guy" /> </li>
<li><img src="images/paisaje.gif" alt="Whizzkids" /> </li>
<li><img src="images/colina.jpg" alt="Königin Mutter" /> </li>
<li><img src="images/nevado.jpg" alt="RT Hybride Archivierung" /> </li>
<li><img src="images/playa.jpg" alt="TÜV SÜD Gruppe" /> </li>
</ul>
 

Luego en el HEAD de tu pagina despues de llamar los js, colocas lo siguiente:

Código Javascript:

<script type="text/javascript">
$(document).ready( function(){
                $('#lista').innerfade({
                     animationtype: 'slide', // o fade
                     speed: 750, // o slow, normal y fast
                     timeout: 2000,
                     type: 'random', // o sequence
                     containerheight: 'auto' //Alto de tus imagenes.
                     });
                } );
</script>
 

Te explico rapidamente, cuando ya esten cargados los elementos $(document).ready, lanza el innerfade, alli colocas el id de tu lista de imagenes, puedes cambiar los parametros del innerfade, estan en el enlace que te mande.

Porsiacaso no coloques la hoja de estilos que viene en el innerfade no es necesario.

Saludos...