Bildergalerie mit Vor- Zurück-Link

Eine Bildergalerie mit Vor- und Zurück-Link und einem Zähler.

Hier der Javascript-Code in einer einfachen HTML-Datei:

<!DOCTYPE html>
<html lang="de">
 
    <head>
        <meta charset="utf-8">
        <title>...</title>
    </head>
 
    <body>
      
        <img id="Galerie1" class="img02" src="img/b001.png" width="400" height="300" alt="Sterne" />

        <p>
        <a href="javascript:zurueck()">zurück</a>&nbsp;
        <span id="zaehler">1</span> von 4&nbsp;
        <a href="javascript:vor()">vorwärts</a>
        </p>

        <script type="text/javascript">
           var BildListe = ["img/b001.png", "img/b002.png", "img/b003.png", "img/b004.png"]; 
           var test = BildListe.length;
           var zahl=0;
           function vor(){
           zahl++;
           if(zahl>test-1){zahl=0;}
           document.getElementById("Galerie1").src= BildListe[zahl];
           document.getElementById("zaehler").innerHTML = zahl+1;
           }
           function zurueck(){
           zahl--;
           if(zahl<0){zahl=test-1;}
           document.getElementById("Galerie1").src= BildListe[zahl];	
           document.getElementById("zaehler").innerHTML = zahl+1;
           }
        </script>
      
    </body>
 
</html>

« Bilderreihen im Artikel

DIVs vor- und zurückschalten »