Slideshow mit JavaScript (automatisch und manuell)

Tech-Essen

Mitglied
Hallo,
kann mir bitte mal jemand sagen, wie man eine Slideshow erstellt, die automatisch und manull zu steuern ist?
HTML:
<html>
	<head>
		<script>
			var index = 2
			function slide()
			{
				index++
				document.getElementById("box").src=index + ".png"
				if(index > 3)
					index = 1
				setTimeout("slide()",1000)
			}
		</script>
	</head>
	<body onload = "slide()">
		<img src="1.png" id="box" width="640" height = "400"></img>
		<input type="submit" value="<-" onclick="index--; document.getElementById('box').src=index + '.png'"></input>
		<input type="submit" value="->" onclick="index++; document.getElementById('box').src=index + '.png'"></input>
	</body>
</html>
So wird das Bild dann sofort durch "setTimeout("slide()",1000)" nach dem manuellen Eingriff wieder geändert. Wie kann man das unterbinden?
 
Hallo Tech-Essen,

ich hätte zu deiner Planung eine wichtige Frage:

  • Was soll mit der automatischen Steuerung passieren, wenn man die manuelle Steuerung betätigt hat?
-> Soll die automatische Steuerung pausiert oder ganz beendet werden?

Da du zum jetzigen Zeitpunkt eine Dauerschleife programmiert hast, welche index im Sekundentakt inkrementiert.

MfG
 
Hallo,

ich hätte ein paar Lösungsansätze:
  • Das Bild am Anfang vom Skript erstellen lassen und den Zugriff in einer globalen Variable speichern, um von überall aus auf das Bild zugreifen zu können.
  • Alle Dateinamen -> die Pfade (Bilder), welche angezeigt werden sollen, in ein Array speichern.
  • Den Index des Startbildes in einer Variable speichern und dann das Bild vom Skript erstellen lassen (Punkt 1).
  • setTimeout durch setInterval ersetzen, und in einer globalen Variable speichern, um von überall aus auf den aktuellen Intervall zugreifen zu können.
  • Den aktuellen Intervall durch clearInterval() beenden
  • Definieren, was bei einem Klick auf den jeweiligen Button passieren soll. (siehe unten)
  • Der Funktion slide() den neuen Bildindex als Argument übergeben, und dann in der Funktion überprüfen, ob der neue Bildindex kleiner oder größer als die Anzahl der Bilder im Array ist.

Ebenso hätte ich noch ein paar Punkte zu deinem bisherigen Code:
  • Semikolon: Bei JavaScript ist es nicht unbedingt notwendig, ein Semikolon nach jeder Anweisung zu setzen, jedoch bietet sich das der besseren Übersichtlichkeit halber an.
  • Soweit mir bekannt ist, ist das nicht mehr üblich, die Anweisungen (onclick, onload etc.) ins Tag zu schreiben. Stattdessen benutzt man die addEventListener Anweisung.

Code:
// ONLOAD
window.onload = function()
{
  // Anweisungen
}
// ONCLICK
document.getElementById('ELEMENT_ID').addEventListener('click', function()
{
  // Anweisungen
});

Vielleicht kannst du ja was damit anfangen :)
MfG
 
Zuletzt bearbeitet:
Zurück