Deutsche Dokumentation: prototype image slider/rotator by Klinger-webDESIGN

Schritt 1 - Setup

Einbinden der JavaScript- und CSS-Dateien in den <head>-Bereich eurer Webseite

<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js" ></script>
<script type="text/javascript" src="js/effects.js" ></script>
<script type="text/javascript" src="js/slider.js" ></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />

Einfügen des Slider-Quellcodes in eure Webseite. Dabei fügt Ihr jedes neue Bild in ein neues <li>-Tag ein und in das <div> mit der id="paging" einen weiteren Link mit ansteigender Zahl

<div id="sliderFrame">
   <ul id="slider">
      <li class="sliderItem" id="sliderItem-1" rel="1">
         <div class="sliderImg">
            <img src="images/img_1.jpg" alt="Stylische Tastatur">
         </div>
         <div class="sliderContent">
            <h2>Stylische Tastatur</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
         </div>
      </li>
      <li class="sliderItem" id="sliderItem-2" rel="2">
         <div class="sliderImg">
            <img src="images/img_2.jpg" alt="Sonnenuntergang">
         </div>
         <div class="sliderContent">
            <h2>Sonnenuntergang</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
         </div>
      </li>
      <li class="sliderItem" id="sliderItem-3" rel="3">
         <div class="sliderImg">
            <img src="images/img_3.jpg" alt="Schmetterling">
         </div>
            <div class="sliderContent">
               <h2>Schmetterling</h2>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
         </div>
      </li>
   </ul>
   <div id="paging" style="display:none;" >
      <a href="#" rel="1" class="paging Pages">1</a>
      <a href="#" rel="2" class="paging Pages">2</a>
      <a href="#" rel="3" class="paging Pages">3</a>
      <a href="#" id="sliderStartStop" rel="sliderStartStop" class="Pages">stop</a>
   </div>
</div>

Zu guter letzt kommt an das Ende der Seite vor das schließende <body>-Tag noch der Javascript-Aufruf zum Initialisieren der Rotation.

<script type="text/javascript">
   document.observe("dom:loaded", function() { 
      initSlider();				
   });
</script>

Schritt 2 - Anpassen des Sliders

Die Höhe für "#sliderFrame" in der CSS-Datei entspricht der Höhe des Sliders ohne der Navigation - diese wird via JavaScript nachgeladen. Wenn kein JS aktiviert ist, funktioniert der Slider nicht und damit wäre auch die Navigation überflüssig
Die neue Höhe, die in der initSlider-Funktion gesetzt wird, entspricht der Höhe des Sliders mit Navigation
Die Breite von "#sliderFrame" in der CSS-Datei entspricht dem Wert der Variablen "move" in der initSlider()-Funktion in slider.js. Achtung: das Minus vor dem Wert nicht vergessen!
Die Geschwindigkeit der Rotation kann mittels der Variable "delay" gesteuert werden

Schritt 3 - Genießt das Ergebnis!

Ich bin gespannt auf euer Feedback! Gern auch als Kommentar auf meiner Seite: http://www.klinger-webdesign.de

Zur Demo