Elegantes Slideshow-Widget per JavaScript

Von dem erst 17-jährigen argentinischen Web-Entwickler Guillermo Rauch stammt ein Nachbau der JavaScript-Slideshow, die der eine oder andere von Obama’s Wahlkampfwebsite kennt. Mit „BarackSlideshow“ lassen sich Bilder nacheinander abspielen, der Titel des jeweils aktuellen Bildes wird rechts daneben durch einen wandernden Pfeil und ggf. durch eine andere Formatierung hervorgehoben:

Voraussetzung ist die Verwendung des JavaScript-APIs Mootools. Das HTML bleibt durch eine reine Injektion per CSS und JavaScript sauber und semantisch korrekt. Dies ist das komplette Markup des Demos auf der Website von Guillero Rauch:

<div id="slideshow">    
   <span id="loading">Loading</span>
   
   <ul id="pictures">   
      <li><img src="melbourne.jpg" alt="Melbourne" title="Melbourne" /></li>
      <li><img src="buenos_aires.jpg" alt="Buenos" title="Buenos" /></li>
      <li><img src="urubamba.jpg" alt="Urubamba" title="Urubamba" /></li>
      <li><img src="london.jpg" alt="London" title="London" /></li>
      <li><img src="venice.jpg" alt="Venice" title="Venice" /></li>
      <li><img src="paris.jpg" alt="Paris" title="Paris" /></li>
      <li><img src="osaka.jpg" alt="Osaka" title="Osaka" /></li>        
   </ul>
   
   <ul id="menu">
      <li><a href="melbourne.jpg">Melbourne</a></li>
      <li><a href="buenos_aires.jpg">Buenos Aires</a></li>
      <li><a href="urubamba.jpg">Urubamba</a></li>
      <li><a href="london.jpg">London</a></li>
      <li><a href="venice.jpg">Venice</a></li>
      <li><a href="paris.jpg">Paris</a></li>
      <li><a href="osaka.jpg">Osaka</a></li>
   </ul>
   
</div>