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

Bild vor dem Upload im Browser verkleinern

Tutorial | 5 Kommentare

Bilder, CSS, JS und Seiten neu laden trotz Browser-Cache

Tipp | 2 Kommentare

Mouseover Buttons mit CSS ohne Nachladen

Tutorial | 0 Kommentare

Android Splash Screen Tutorial

Tutorial | 0 Kommentare

JavaScript: Bereich durch Link aufklappen und zuklappen

Tutorial | 3 Kommentare

HTML5: Bilder Upload mit Verkleinerung auf Client Seite

Tutorial | 6 Kommentare

jQuery: HTML5 Canvas mit Ajax an Server senden

Tutorial | 0 Kommentare

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.