Ach du liebe Zeit.
Ich wollte Vorschau, nicht speichern (bitte um Entschuldigung!).
Hier nochmals der Code, korrekt formatiert:
Html:
<div id="bsp_1" class="bsp"><p>Bsp_1</p></div>
<div id="bsp_2" class="bsp"><p>Bsp_2</p></div>
<div id="bsp_3" class="bsp"><p>Bsp_3</p></div>
<div id="bsp_4" class="bsp"><p>Bsp_4</p></div>
Javascript:
function Hauptprogramm() {
/* Variablen für die Durchläufe werden definiert */
var Durchlauf_3s;
var Durchlauf_5s_1;
var Durchlauf_5s_2;
/* Variable "aktiv" [definiert, welches DIV anzuzeigen und welches zu verstecken ist] */
var aktiv = 1;
/* Das erste DIV wird aktiviert bzw. angezeigt */
document.getElementById("bsp_" + aktiv).style.display = "block";
/* aktiv wird auf 2 gesetzt */
aktiv += 1;
/* setInterval: Wenn "aktiv" größer 1 ist [ist der Fall], so wird "aktiv" minus 1
[daher das gerade aktivierte bzw. angezeigt DIV] versteckt und "aktiv" [jetzt 2] angezeigt.
Dies soll nach einem Interval von 3 Sekunden geschehen [siehe unten].
*/
Durchlauf_3s = setInterval(function () {
if (aktiv > 1) {
document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
}
document.getElementById("bsp_" + aktiv).style.display = "block";
/* aktiv wird auf 3 gesetzt */
aktiv += 1;
/* Das Interval wird nach einem Durchlauf beendet. */
clearInterval(Durchlauf_3s);
}, 3000) // nach einem Interval von 3 Sekunden
/* 2. Durchlauf: funktioniert analog zum 1. Durchlauf.
*/
Durchlauf_5s_1 = setInterval(function () {
if (aktiv > 1) {
document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
}
document.getElementById("bsp_" + aktiv).style.display = "block";
aktiv += 1;
clearInterval(Durchlauf_5s_1);
}, 5000)
/* 3. Durchlauf */
Durchlauf_5s_2 = setInterval(function () {
if (aktiv > 1) {
document.getElementById("bsp_" + (aktiv - 1)).style.display = "none";
}
document.getElementById("bsp_" + aktiv).style.display = "block";
aktiv += 1;
clearInterval(Durchlauf_5s_2);
}, 5000)
}
window.addEventListener("load", Hauptprogramm);