00 Stimmen

JavaScript: Bild und Link wechseln alle X Sekunden

Frage von Alaska1966 | 02.02.2015 um 09:35

Ich würde gerne auf meiner Hompage Bilder einbinden und die solten nach 10 Sekunden wechseln. Wenn man auf die Bilder klickt sollte dann aber die dazugehörige Seite auf gehen. Kann mir da jemand helfen. Danke schon mal.

Das Grundgerüst steht, aber ich hätte gerne Links zu den Bildern. Kann mir jemand weiter helfen. Ich wäre sehr dankbar. Gruß Peter

Mein JavaScript zum Bildwechsel:

<script type="text/javascript">
  var x = 10; // seconds
  var images = ["bild/bild.jpg", "bild/bild1.jpg" , "bild/bild2.jpg"];
  var index = 1;

  setInterval(function() {
    document.getElementById("main-image").src = images[index];
    index = (index + 1) % images.length;
  }, x * 1000);
</script>

Mein HTML zum Anzeigen der Bilder:

<img id="main-image" src="bild/bild.jpg" />

Ich weiß nicht ob das hier richtig ist aber ich denke mal ja.

AntwortenPositivNegativ
Avatar
Progger99
0Beste Antwort0 Stimmen

Du könntest neben den Bildern natürlich auch die Links in einen Array schreiben und zur gleichen Zeit zuweisen.

Also zum Beispiel so:

var x = 10; // seconds
var images = ["bild/bild.jpg", "bild/bild1.jpg", "bild/bild2.jpg"];
var links = ["link.htm", "link1.htm" , "link2.htm"];
var index = 1;
 
setInterval(function() {
  document.getElementById("main-image").src = images[index];
  document.getElementById("main-link").href = links[index];
  index = (index + 1) % images.length;
}, x * 1000);

Wichtig ist natürlich, dass es die gleiche Anzahl von Links und Bildern gibt (die Arrays müssen gleich lang sein) und die Reihenfolge stimmt (erstes Element im Bilderarray bekommt den ersten Link im Linkarray etc).

Das HTML würde man dann so anpassen:

<a id="main-link" href="link.htm">
   <img id="main-image" src="bild/bild.jpg">
</a>

Über die ID "main-link" wird entsprechend der Link gesetzt, über die ID "main-image" das Bild.

Geht es so?
02.02.2015 um 14:24

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

jQuery: Bild ändern

Frage | 1 Antwort

PHP: Sekunden in das Format 00:00:00 bringen

Frage | 1 Antwort

WhatsApp: Kein Bild mehr

Frage | 1 Antwort

HTML: JavaScript-Link zentrieren

Frage | 1 Antwort

Wie viele Sekunden hat ein Tag?

Frage | 3 Antworten

jQuery: Komplettes DIV mit enthaltenem Link anklickbar machen

Frage | 1 Antwort

PHP: Nachladen von Bild oder anderem Inhalt erzwingen

Frage | 1 Antwort

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.