Diashow aufgebohrt

Oft sind Diashows mit JavaScript sehr komplex aufgebaut, der Anwender muss im JavaScript-Code die Bilder für die Diashow eintragen oder die Geschwindigkeit etc. anpassen.

Mit dieser autom. Diashow werden Bilder und Beschreibungen aus einer HTML-Aufzählungsliste (<ul>) über JavaScript ausgelesen und angezeigt. Der Vorteil, wenn man weitere Bilder hinzufügt ist, das nur die Aufzählungsliste erweitert werden muss.

Ein Beispiel:

<ul id="bilder" speed="4500" fade="15">
 <li data-src="02.jpg" data-sub-html="<p>Beschreibung Bild 2</p>"></li>
 <li data-src="01.jpg" data-sub-html="<p>Beschreibung Bild 1</p>"></li>
 <li data-src="03.jpg" data-sub-html="<p>Beschreibung Bild 3</p>"></li>

 <li data-src="04.jpg" data-sub-html="<p>Beschreibung Bild 4</p>"></li>
 <li data-src="05.jpg" data-sub-html="<p>Beschreibung Bild 5</p>"></li>
</ul>

Einfach die Position der Listenelemente ändern um die Reihenfolge der Bilder anzupassen. Bei speed="4500" wird die Geschwindigkeit angepasst und bei fade="15" die Dauer des Fade-in-Effekts.

Demo

Central Park in New York

Je nachdem welche Hintergrundfarbe auf der Seite vorhanden ist, sieht der Fade-In Effekt anders aus. Man kann die Hintergrundfarbe anpassen, entweder mit background-color: …; oder mit background: repeating-linear-gradient(…); (Beispiel) oder wie im oberen Beispiel einen Bilderrahmen um die Diashow setzen.

Quelltext  Kopieren ❘ Ausblenden ❘ Zeilen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Diashow</title>

  <style>
  ul#bilder {
   display: None;
  }

  img#bild {
   border: Solid 3px #FFD700;
  }
  </style>

  <script>
  // Script nach dem laden der Seite starten
  window.addEventListener("load", function() {

   // Auf das HTML-Attribut  id="bilder" zugreifen
   let bilder = document.getElementById("bilder");

   // Alle HTML-Tags: '<li>'  in einem Array speichern
   var gruppe = bilder.getElementsByTagName("li");

   // Die Attribute: 'speed' und 'fade' auslesen und in Variablen speichern
   var speed = bilder.getAttribute("speed");
   var fade = bilder.getAttribute("fade");

   // Zähler auf 1 setzen
   var i = 1;
  
   // Führt eine Funktion in einem festgelegten Rhythmus immer wieder aus,
   setInterval(function () {

    // Hier bekommt das Bild die Adresse (src) aus der 'gruppe'.
    document.getElementById("bild").src = gruppe[i].dataset.src;

    // Hier wird ein Text aus der 'gruppe' eingefügt.
    document.getElementById("text").innerHTML = gruppe[i].dataset.subHtml;

    // Die Opazität (Deckkraft, opacity) des Bildes auf: '0.0' setzen
    document.getElementById("bild").style.opacity = "0.0";

    // Fade-in Effekt
    // Eine for-Schleife die von 0 bis 100 zählt
    for (let s = 0 ; s <= 100 ; s++ ) {
     const opa = s / 100;

     // Führt eine Funktion nach einer bestimmten Verzögerungszeit aus.
     window.setTimeout(function () {

      // Die Opazität (Deckkraft, opacity) des Bildes setzen
      document.getElementById("bild").style.opacity = opa.toString();

     } , fade * s); // Hier wird die Verzögerungszeit festgelegt.
    }

    i++; // Zähler erhöhen
    // Zähler zurücksetzen wenn dieser die Anzahl vom Array: 'gruppe' erreicht hat.
    if (i == gruppe.length) i = 0;

   }, speed); // Hier wird der Rhythmus der Funktion festgelegt.

  });
  </script>

 </head>
<body>

<ul id="bilder" speed="4500" fade="15">
 <li data-src="01.jpg" data-sub-html="<p>Beschreibung Bild 1</p>"></li>
 <li data-src="02.jpg" data-sub-html="<p>Beschreibung Bild 2</p>"></li>
 <li data-src="03.jpg" data-sub-html="<p>Beschreibung Bild 3</p>"></li>
</ul>

<figure>
 <img src="01.jpg" id="bild">
 <figcaption id="text"> <p>Beschreibung Bild 1</p> </figcaption>
</figure>

</body>
</html>

Infos über die Verwendung von Datenattributen:
Using data attributes

Weitere Diashows finden Sie unter: Diashow automatisch und Diashow manuell

Tipps

Berechnungen mit dem Datum
Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...
SQLite-Datei mit PHP und PDO erstellen
Der Vorteil von SQLite ist, das die Datenbank eine Text-Datei ist und keine Verbindung zu einem Datenbank-Server benötigt wird.
Checkbox (Mehrfachauswahl) und DB-Ausgabe
Mit den Checkboxen lassen sich mehrere Einträge von der DB-Tabelle auswählen, auswerten und ausgeben.
Diese Schlagwörter könnten Sie interessieren:
Event-Kalender Berechnungen Textgestaltung CSS-Counter Linkliste Counter Datenschutz-Hinweis Responsiv Zugriffsrechte Mehrfachauswahl Metadaten Dateibrowser Gästebuch Favicon Zeitansage Diashow Canvas Quelltext Fotoalbum Sprachumschaltung