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

PHP mit Sicherheit
Sicheres Programmieren – Traue niemals den Eingaben des Benutzers! Speichern Sie fremde Benutzereingaben nie ohne eine Überprüfung in einer Datenbank oder in einer Datei ab.
Formulardaten über AJAX überprüfen und speichern
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.
Mit PHP zeichnen - Eine Grafik mit PHP erstellen
Mit den Grafikfunktionen können Sie zur Laufzeit des PHP-Scripts auch Grafiken erzeugen.
Diese Schlagwörter könnten Sie interessieren:
Linkliste Responsiv Zugriffsrechte Webseitenschutz Dateibrowser Zeitansage EVA-Prinzip Floodsperre Wecker Zoom-Funktion Veranstaltungsliste JSON localStorage Textgestaltung Suchmaschine Zeichnen Kommentar-Box PHP-Fehlermeldungen RSS Feed Seitenformatierung