TinyFader es un completo, elegante y liviano slideshow de imágenes implementado con Javascript.
TinyFader implementación
Primero enlazamos el archivo Javascript (JS) que contiene a TinyFader:
<script type="text/javascript" src="tinyfader.js"></script>
Creamos la estructura HTML que contendrá el slideshow:
<div id="slideshow"> <ul id="slides"> <li id="content"> <h1>TinyFader - Simple JavaScript Slideshow</h1> <p>This super lightweight (1.3 KB) fading JavaScript slideshow script can easily be customized to integrate with any website through CSS. You can add any content to it, not just images, and it gracefully degrades without JavaScript support. The script supports automatic rotation with the option to auto-resume and an active class on a navigation list if applicable.</p> <p><em>For complete details visit <a href="http://www.leigeber.com/">leigeber.com</a>.</em></p> </li> <li><img src="photos/sea-turtle.jpg" width="500" height="300" alt="Sea turtle" /></li> <li><img src="photos/coral-reef.jpg" width="500" height="300" alt="Coral Reef" /></li> <li><img src="photos/blue-fish.jpg" width="500" height="300" alt="Blue Fish" /></li> </ul> </div> <div class="sliderbutton"><img src="images/right.gif" width="32" height="38" alt="Next" onclick="slideshow.move(1)" /></div> </div> <ul id="pagination" class="pagination"> <li onclick="slideshow.pos(0)">1</li> <li onclick="slideshow.pos(1)">2</li> <li onclick="slideshow.pos(2)">3</li> <li onclick="slideshow.pos(3)">4</li> </ul> </div>
Por último el Javascript que le da vida y que configura el slideshow:
<script type="text/javascript">
var slideshow=new TINY.fader.fade('slideshow',{
id:'slides',
auto:3,
resume:true,
navid:'pagination',
activeclass:'current',
visible:true,
position:0
});
¿Sencillo No?
TinyFader
Sitio: www.leigeber.com/2010/09/fading-slideshow-script
Demo: sandbox.leigeber.com/tinyfader
Descargar: forum.leigeber.com/index.php?app=downloads&showfile=11