luculus: Bildergalerie automatisch weiterlaufen lassen

SELF-Forum

Bildergalerie automatisch weiterlaufen lassen

luculus
– Informationen zu den Bewertungsregeln

Guten morgen zusammen

Ich habe folgendes Problem, welches ich mit meinen geringen javascript Kenntnissen nicht selbst bewältigen kann:
Ich möchte diese Bildergalerie so anpassen, dass die Bilder nach einer vordefinierten Zeitspanne (z.B. nach 10sek) automatisch weiter springen, falls der Sitebesucher nicht selbst auf den Vorwärtsbutton klickt.

Schon mal danke im Voraus.
Gruß luculus

Und hier noch der Javascript innerhalb der Site:

<head>
<script>
  var myImages = new Array();
  myImages[1] = new Image();
  myImages[1].src = "images/01.jpg";
  myImages[2] = new Image();
  myImages[2].src = "images/02.jpg";
  myImages[3] = new Image();
  myImages[3].src = "images/03.jpg";

var maxValue = myImages.length - 1;
  var intValue = 1;
  function gallerie(charValue) {
  if(charValue == 'c') {
    document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'>";
   }
   else if(charValue == '+') {
    if(intValue == maxValue) {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'>";
     intValue = 1;
    }
    else {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'>";
     intValue = intValue + 1;
    }
   }
   else if(charValue == '-') {
    if(intValue == 1) {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + "'>";
     intValue = maxValue;
    }
    else {
     document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'>";
     intValue = intValue - 1;
    }
   }
  }
 </script>
</head>

<body onload="gallerie('c')">
   <div><a href="#" onclick="gallerie('-')">Zurück</a></div>
   <div id="imgGallerie"></div>
   <div><a href="#" onclick="gallerie('+')">Vorwärts</a></div>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Bildergalerie automatisch weiterlaufen lassen

    steckl
    – Informationen zu den Bewertungsregeln

    Hi,

    Ich möchte diese Bildergalerie so anpassen, dass die Bilder nach einer vordefinierten Zeitspanne (z.B. nach 10sek) automatisch weiter springen, falls der Sitebesucher nicht selbst auf den Vorwärtsbutton klickt.

    Du koenntest am Ende deiner Funktion Einen Interval setzen, den du beim naechsten Aufruf der Funktion wieder beendest.
    Ist vielleicht nicht sehr elegant, aber sollte funktionieren.

    Und hier noch der Javascript innerhalb der Site:

    <head>
    <script>

      

>   
>   var maxValue = myImages.length - 1;  
>   var intValue = 1;  

//hier globale Variable anlegen und ersten Interval erzeugen:  
var intervalVar = window.setInterval("gallerie('+')", 10000);  
  

>   function gallerie(charValue) {  

//hier den gespeicherten interval beenden (falls vorhanden)  

>   if(charValue == 'c') {  

...  

>     else {  

...  

>     }  
>    }  

//hier neuen Interval starten  

>   }

    </script>
    </head>

    mfG,
    steckl

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Bildergalerie automatisch weiterlaufen lassen

      luculus
      – Informationen zu den Bewertungsregeln

      Hi,

      Ist vielleicht nicht sehr elegant, aber sollte funktionieren.

      muss nicht schön sein, Hauptsache ist es funktioniert

      //hier globale Variable anlegen und ersten Interval erzeugen:
      var intervalVar = window.setInterval("gallerie('+')", 10000);

      hab ich eingefügt, springt auch nach 10 sek weiter. nur leider springt der javascript jetzt immer gleich auf das erste Bild wenn ich auf eine der Pfeiltasten drücke

      liegt wahrscheinlich an meiner eigenen Unfähigkeit, da javascript für mich ein Buch mit sieben siegeln ist.

      //hier den gespeicherten interval beenden (falls vorhanden)

      hier und

      //hier neuen Interval starten

      hier bin ich nämlich ratlos was ich da reinschreiben soll

      hab mich zwar halb durch selfhtml gelesen aber verstanden wie javascript wirklich funktioniert hab ich noch nicht.

      brauche also noch weiter Hilfe
      PS. muss keine aufwendige Lösung sein Hauptsache es funktioniert

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Bildergalerie automatisch weiterlaufen lassen

        steckl
        – Informationen zu den Bewertungsregeln

        Hi,

        //hier globale Variable anlegen und ersten Interval erzeugen:
        var intervalVar = window.setInterval("gallerie('+')", 10000);
        hab ich eingefügt, springt auch nach 10 sek weiter. nur leider springt der javascript jetzt immer gleich auf das erste Bild wenn ich auf eine der Pfeiltasten drücke

        Habs mal nachgebaut und kann das so nicht bestätigen.

        //hier den gespeicherten interval beenden (falls vorhanden)

        hier benötigst du window.clearInterval(intervalVar);
        Der interval den du oben gesetzt hast lässt die Bilder alle 10sec weiterspringen, egal ob noch zusätzlich ein Link gedrückt wurde oder nicht. Wenn aber ein Link gedrückt wurde sollen ja die 10sec wieder von vorne beginnen, darum musst du den alten Interval löschen.

        hier und

        //hier neuen Interval starten

        Hier startest du nachdem ein neues Bild angezeigt wurde wieder einen neuen Interval von 10sec. Das geht wieder analog zu dem ersten setInvterval()-Aufruf, nur dass du diesmal das "var" davor weglassen musst.

        hier bin ich nämlich ratlos was ich da reinschreiben soll

        Ist es jetzt klarer geworden?

        hab mich zwar halb durch selfhtml gelesen aber verstanden wie javascript wirklich funktioniert hab ich noch nicht.

        Was ist mit der anderen hälfte? ;)

        mfG,
        steckl

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln