• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

js bilder blättern per erhöhung und schleife

S

seb

Neues Mitglied
hallo!

hab folgendes skript:

var zeige = 1;
var richtung = 0;

function change(richtung) {
document.getElementById('bild').src = "images/" + zeige + ".jpg";
if(zeige > 5 ) {
zeige = 0;
} else if(zeige < 0) {
zeige = 5
}
zeige += richtung;
}
}

Im body stehen dann diese links:

<a href="javascript:change(-1)">blabla
<a href="javascript:change(1)">blabla

2 Fragen:

1. Wie bringe ich das ganze in eine Schleife, sodass z.B bei 5 Bildern nach dem fünften das erste bzw vor dem ersten wieder das fünfte kommt?

2. scheint die erhöhung nicht zu stimmen, vorwärts geht, rückwärts ist alles durcheinander.

wäre dankbar für antworten!
grüße
seb
 
Weiss nicht ob du das meinst aber hier wäre meine lösung
Außerdem musst du genau beachten wie du deinen Code schreibst.
Wenn du 5 Bilder hast dann solltest du nicht schreiben wenn > 5, sondern >= 5. Du Willst ja wissen ob das jetzige Bild größer als 4 ist. Bzw ob es das 5. Bild ist. Kannst meinen Code ja nehmen und ihn in eine Funktion umwandeln.
Wenn du mal guten Javascript Code schreiben willst, dann schau dir mal bitte an wie man Event Listener im script Bereich definiert :) Aber im Prinzip war dein Code schon richtig. Nur noch ein paar kleine Anfänger Fehler =)


HTML: 
<html>
  <head>
    <script type="text/javascript">
      // array mit bildern
      var bilder = ["blau.jpg","gruen.jpg","rot.jpg"];
      
      // zaehler am Anfang zu 0 setzen
      var zaehler = 0;
      
      // Bild setzen sobald Dokument geladen wurde
      window.onload = function() {
        document.getElementById('meinImage').src = bilder[0];
        
        // Event Listener
        document.getElementById('linksButton').onclick = function() {
          linke();
        }
        document.getElementById('rechtsButton').onclick = function() {
          rechts();
        }
        
        
        
      }
      
      
      function linke() {
        // Wenn der Zaehler 0 ist soll wieder von hinten angefangen werden
        if(zaehler == 0) {
          zaehler = bilder.length-1;
          document.getElementById('meinImage').src = bilder[(bilder.length-1)]
        } else {
          // Wenn nicht erstes Bild dann ein Bild zurück
          zaehler--;
          document.getElementById('meinImage').src = bilder[zaehler]
        }
      }
      
      function rechts() {
        // Wenn der Zaehler das Maxmimum erreicht hat soll wieder von vorne angefangen werden
        if(zaehler == (bilder.length - 1)) {
          zaehler = 0;
          document.getElementById('meinImage').src = bilder[0]
        } else {
          // Wenn nicht letztes Bild dann nächstes anzeigen
          zaehler++;
          document.getElementById('meinImage').src = bilder[zaehler]
        }
      }
      
    </script>
  </head>
  <body>
    <img id="meinImage" src="">
    <input id="linksButton" type="button"  value="links">
    <input id="rechtsButton" type="button"  value="rechts">
  </body>
</html>
 
Zuletzt bearbeitet:
Hallo,

habe den von dir vorgeschlagenen Code in Verwendung und klappt wirklich super, aber ich würde ihn gerne um eine Funktion erweitern. Ist es möglich die geladenen Bilder jeweils auf die aktuelle Größe des Browserfensters zu skalieren?? das Bild soll sich also auch beim verkleinern des Browserfensters mitskalieren.

Danke und viele Grüße,
Christian
 
füg einfach in den head der Seite folgendes ein:
HTML: 
<style>
img {
   width: 30% /*je nachdem wie breit das Bild sein soll*/
   height: 30% /*genauso*/
}
</style>
 
danke für die rasche Antwort!
klappt aber leider nicht, hat auf die Bildgröße garkeinen effekt :-(

habe im head jetzt folgendes stehen:

HTML: 
<style>
img {
   width: 30% /*je nachdem wie breit das Bild sein soll*/
   height: 30% /*genauso*/
}
</style>

<script type="text/javascript">
      // array mit bildern
      var bilder = ["hintergrund/backfrei.jpg","hintergrund/backfrei1.jpg","hintergrund/backfrei2.jpg",];
  
      // zaehler am Anfang zu 0 setzen
      var zaehler = 0;
  
      // Bild setzen sobald Dokument geladen wurde
      window.onload = function() {
        document.getElementById('meinImage').src = bilder[0];
        document.height = '50';
        bilder[0].height='50';
    
    
        // Event Listener
        document.getElementById('linksButton').onclick = function() {
          linke();
        }
        document.getElementById('rechtsButton').onclick = function() {
          rechts();
        }
    
    
    
      }
  
  
      function linke() {
        // Wenn der Zaehler 0 ist soll wieder von hinten angefangen werden
        if(zaehler == 0) {
          zaehler = bilder.length-1;
          document.getElementById('meinImage').src = bilder[(bilder.length-1)]
        } else {
          // Wenn nicht erstes Bild dann ein Bild zurück
          zaehler--;
          document.getElementById('meinImage').src = bilder[zaehler]
        }
      }
  
      function rechts() {
        // Wenn der Zaehler das Maxmimum erreicht hat soll wieder von vorne angefangen werden
        if(zaehler == (bilder.length - 1)) {
          zaehler = 0;
          document.getElementById('meinImage').src = bilder[0]
        } else {
          // Wenn nicht letztes Bild dann nächstes anzeigen
          zaehler++;
          document.getElementById('meinImage').src = bilder[zaehler]
        }
      }
  
    </script>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben