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="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> <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>
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
<!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>
window.addEventListener("load", function() {
let bilder = document.getElementById("bilder");
var gruppe = bilder.getElementsByTagName("li");
var speed = document.getElementById("bilder").getAttribute("speed");
var fade = document.getElementById("bilder").getAttribute("fade");
var i = 1;
setInterval(function () {
document.getElementById("bild").src = gruppe[i].dataset.src;
document.getElementById("text").innerHTML = gruppe[i].dataset.subHtml;
document.getElementById("bild").style.opacity = "0.0";
for (let s = 0 ; s <= 100 ; s++ ) {
const opa = s / 100;
window.setTimeout(function () {
document.getElementById("bild").style.opacity = opa.toString();
} , fade * s);
}
i++;
if (i == gruppe.length) i = 0;
}, speed);
});
</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>
Weitere Diashows finden Sie unter: Diashow automatisch und Diashow manuell
Tipps
- Suchanfrage an eine Datenbank über AJAX senden und empfangen
- Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
- 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.
- Sitemaps-Protokoll für Suchmaschinen automatisch erstellen
- Sorgen Sie dafür, dass die Nutzer auf einen größeren Teil Ihrer Website aufmerksam werden mit einem „Sitemaps-Protokoll”. Dies stellt eine einfache Möglichkeit für Webmaster dar, Suchmaschinen Seiten auf Ihrer Website zu melden, die zum durchsuchen verfügbar sind.
Fotoalbum Sprachumschaltung Counter Marquee Floodsperre localStorage Operatoren Rahmen AJAX Blätterfunktion Wecker Datenschutz-Hinweis Responsiv RSS Feed Metadaten Formulare Zeichnen Canvas PHP-Fehlermeldungen Suchmaschine