Bildergalerie mit Vor- Zurück-Link

Javascript-Tutorial Inhalt »

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

Sterne

zurück  1 von 4  vorwärts

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>
 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Juli 2017
M D M D F S S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31