[Javascript] Einfache Bildergalerie mit Diashow

In diesem Tutorial geht es darum mit Javascript eine Bildergalerie zu erstellen.
Das Beispiel ist sehr einfach gehalten und verzichtet auf Dekorationen jeder Art.
Der zugehörige HTML-Code ist ebenfalls sehr einfach und sollte vor dem Verwenden in einer
aktiven Website entsprechend erweitert werden (Doctype etc.).
Zuerst der Javascript Code:
Als erstes wird ein Array angelegt, das die Namen der Bilder speichert. Am besten ist es,
die Bilder mit einem Namen zu versehen und dann durch zu nummerieren, dann kann eine Schleife zum erstellen des Arrays verwendet werden. Im Beispiel liegen die Bilder im Ordner Bilder und heißen Bildxyz.png.
xyz steht dabei für eine 3 stellige Nummer. Es wird ein Array mit 99 Bildernamen angelegt, es wird nicht geprüft ob die
Bilder existieren oder ob die Pfade stimmen.

Javascript:

var bilder =new Array();
function initBilder(){
  for(var i =0;i<=99;i++){
    if(i<10){
    bilder[i]="Bilder/Bild00"+i+".png"
    }
    else{
     bilder[i]="Bilder/Bild0"+i+".png"
    }
  }
}
initBilder();

Das aktuelle Bild wird in einer Variablen gespeichert.

Javascript:

var currBild=0; //Bildzaehler

Im Body der HTML-Seite wird ein div angelegt, in dem die Bilder angezeigt werden und mit einem Startbild
versehen.

HTML:

<div><img src="Bilder/Bild000.png" id="Bildbereich" width="400"
height="400"/>
</div>

Dazu passend wird eine Funktion angelegt, die das Bild in dem div-Container ändert.

Javascript:

function showBild(){
var nuBi=window.document.getElementById("Bildbereich");
nuBi.src=bilder[currBild];
}

Funktionen für vor und zurück

Javascript:

function nextBild(){
  if(currBild<=bilder.length){
   currBild++;
   showBild();
  }
}
function prevBild(){
  if(currBild>0){
    currBild--;
    showBild();
  }
}

Im HTML-Bereich werden Knöpfe für die Funktionen erzeugt:

HTML:

<div>
<form name="Buttons">
<input type="button" name="prev" value="Vorheriges Bild"
onClick="prevBild();">
<input type="button" name="next" value="Naechstes Bild"
onClick="nextBild();">
</div>

Damit ist die Galerie schon fertig. Um die Bilder nun als Diashow laufen zulassen
werden 2 weitere Funktionen benötigt.

Javascript:

function slideShowInit(){
initBild();
slideShow();
}
function slideShow(){
nextBild();
window.setTimeout(slideShow, 3000);//Angabe Timeout in Millisekunden
}

Im HTML wird dann noch ein Button für die Slideshow eingefügt (In "Buttons"):

HTML:

<input type="button" name="slide" value="Slideshow"
onClick="slideShowInit();">

Die Funktion slideShow ruft sich über setTimeout nach einer gewissen Zeit selbst wieder auf.
Die Zeit wird in Millisekunden angegeben, 3000 Millisekunden sind also 3 Sekunden.

Diese Bildergalerie lässt sich nun beliebig erweitern, zum Beispiel mit einer Pausefunktion für die Slideshow,
hübscheren Knöpfen, stylesheets für die div-Container etc.

Viel Spaß beim Ausprobieren!
Und hier noch der komplette Code zum Kopieren:

HTML:

<html>
<head>
<script>
var bilder = new Array();
function initBilder(){
  for(var i =0;i<=99;i++){
    if(i<10){
    bilder[i]="Bilder/Bild00"+i+".png"
    }
    else{
      bilder[i]="Bilder/Bild0"+i+".png"
    }
  }
}
initBilder();
var currBild=0; //Bildzaehler
function showBild(){
  var nuBi=window.document.getElementById("Bildbereich");
  nuBi.src=bilder[currBild];
}
function nextBild(){
  if(currBild<=bilder.length){
   currBild++;
   showBild();
  }
}
function prevBild(){
  if(currBild>0){
    currBild--;
    showBild();
  }
}
function initBild(){
currBild=0;
showBild();
}
function slideShowInit(){
  initBild();
  slideShow();
}
function slideShow(){
  nextBild();
  window.setTimeout(slideShow, 3000); //Angabe Timeout in Millisekunden
}
</script>
</head>
<body>
<div><img src="Bilder/Bild000.png" id="Bildbereich" width="400"
heigth="400"/>
</div>

<div>
<form name="Buttons">
<input type="button" name="prev" value="Vorheriges Bild"
onClick="prevBild();">
<input type="button" name="next" value="Naechstes Bild"
onClick="nextBild();">
<input type="button" name="slide" value="Slideshow"
onClick="slideShowInit();">
</form>
</div>
</body>
</html>

Bewertungen

More resources from ikosaeder

Share this resource