Alex: Problem bei Bildwechselscript

Hi,
Ich versuche mich gerade an einem Bildwechselscript und habe dort ein Problem.
Ich habe 4 Bilder die 1.jpg bis 4. jpg benannt sind. Nun habe ich mir gedacht, das ich in jedem Intervall den Bildnamen + 1 rechnen lasse und .jpg ergänze, damit ich immer ein Bild weiter gelange. Damit nach dem 4. Bild wieder das erste erscheint habe ich eine If-Anweisung eingebaut. Ich muss nur die aktuelle Bildnummer auslesen und weiß leider nicht wie ich dies hinbekomme. Ihr könnt mir da doch sicher helfen?

  
<!--  
function bildwechsel_starten()  
{  
   bildwechselthread = setInterval("bildwechsel()", 5000);  
}  
function bildwechsel()  
{  
   if(bildnummer<4)  
   bildnummer = bildnummer + 1;  
   else  
   bildnummer = 0;  
   document.getElementById("wechselndesbild").src = bildnummer + ".jpg";  
}  
-->
  
<body onload="bildwechsel_starten()">  
   <img id="wechselndesbild" src="1.jpg" />  
</body>  

  1. Hola,

    so herum kann etwas wechseln.

    var bildnummer = 0;  
      
    function bildwechsel_starten() {  
      bildwechselthread = setInterval("bildwechsel()", 1000);  
    }  
      
    function bildwechsel() {  
      if (bildnummer < 4) {  
        bildnummer += 1;  
        document.getElementById("wechselndesbild").src = bildnummer + ".jpg";;  
      }  
      else {  
        bildnummer = 0;  
      }  
    }
    

    Bei mehr als einer Variable in einem if else musst du sie klammern!

    grusss qx

    1. Hey, danke hat super geklappt!
      Aber irgentwie bleibt das 4. Bild länger als die übrigen 3. Woran kann das liegen?
      Und ich würde gerne noch Pfeile oder ähnliches hinzufügen, mit denen man die Bilder manuell wechseln kann, wie mache ich das am besten?

      1. gut so,

        andere Variante:

        var bildnummer = 1;  
          
        function bildwechsel_starten() {  
          bildwechselthread = setInterval("bildwechsel()", 1000);  
        }  
          
        function bildwechsel() {  
          if (bildnummer < 4) bildnummer += 1;  
          else bildnummer = 1;  
          document.getElementById('wechselndesbild').innerHTML = bildnummer;  
        }
        

        1000 zum Testen...

        1. das war zu schnell

          var bildnummer = 1;  
            
          function bildwechsel_starten() {  
            bildwechselthread = setInterval("bildwechsel()", 1000);  
          }  
            
          function bildwechsel() {  
            if (bildnummer < 4) bildnummer += 1;  
            else bildnummer = 1;  
            document.getElementById('wechselndesbild').src= bildnummer + ".jpg";  
          }
          
          1. Top! Funktioniert einwandfrei!
            Habe mal ein bisschen rumprobiert die Möglichkeit einzubauen manuell zwischen den Bildern zu wechseln und habe deshalb einen Ramen um das "Wechselbild" gebastelt, der vier Grafiken enthält, die wenn auf sie geklickt wird, das "Wechselbild" zum jeweiligen Bild wechseln lassen sollen. Es klappt allerdings nicht so wirklich. Villeicht könnt ihr mir da ja ein wenig behilflich sein.

              
            <!--  
            var bildnummer = 0;  
              
            function bildwechsel_starten() {  
              bildwechselthread = setInterval("bildwechsel()", 1000);  
            }  
              
            function bildwechsel() {  
              if (bildnummer < 4) {  
                bildnummer += 1;  
              
              }  
              else {  
                bildnummer = 1;  
              }  
              document.getElementById("wechselndesbild").src = bildnummer + ".jpg";  
            }  
              
            function wechselzubild1(){  
            bildnummer = 1;  
            }  
            function wechselzubild2(){  
            bildnummer = 2;  
            }  
            function wechselzubild3(){  
            bildnummer = 3;  
            }  
            function wechselzubild4(){  
            bildnummer = 4;  
            }  
            -->  
            
            
              
            <body onload="bildwechsel_starten()">  
              
            <div id="bildverlauf">  
               <img id="wechselndesbild" src="1.jpg" />  
               <div id="bildauswahl">  
            		  
            			<li> <a href="#" onclick="wechselzubild1()"><img id="punkt1" src="bildauswahlpunkt.gif" /></a>  
            			<li> <a href="#" onclick="wechselzubild2()"><img id="punkt2" src="bildauswahlpunkt.gif" /></a>  
            			<li> <a href="#" onclick="wechselzubild3()"><img id="punkt3" src="bildauswahlpunkt.gif" /></a>  
            			<li> <a href="#" onclick="wechselzubild4()"><img id="punkt4" src="bildauswahlpunkt.gif" /></a>  
            		  
               </div>  
            </div>  
              
            </body>  
            
            
              
            #wechselndesbild{  
            border-radius: 10px;  
            width: 900px;  
            height: 300px;  
            margin-left: 5px;  
            margin-top: 5px;  
            }  
              
            #bildverlauf{  
            height: 330px;  
            width: 910px;  
            background: grey;  
            border-radius: 10px;  
            box-shadow: 5px 5px 5px 5px #ccc;  
            }  
              
            #bildauswahl{  
            height: 25px;  
            width: 200px;  
            margin-left: 355px;  
            background: grey;  
            margin-top: 0px;  
            }  
              
            #bildauswahl li {  
            list-style: none;  
            text-decoration: none;  
            margin-left: 0px;  
            float: left;  
            margin-top: 0px;  
            background: url(bildauswahlpunkt_weis.gif);  
            }  
              
            #bildauswahl li:hover{  
            background: url(bildauswahlpunkt_grau.gif);  
            }  
            
            
            1. Hat keiner eine Idee? Zudem hätte ich gerne einen sanften Übergang, also eine Überblendung. Wäre nett wenn mir da jemand etwas helfen könnte. :-)

              1. Om nah hoo pez nyeetz, Alex!

                Hat keiner eine Idee? Zudem hätte ich gerne einen sanften Übergang, also eine Überblendung. Wäre nett wenn mir da jemand etwas helfen könnte. :-)

                Hast du denn das bereits vorgeschlagene Bildwechselskript schon mal angeschaut? Die Übergänge dort sind sanft.

                Matthias

                --
                Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lid und Lido.

                1. Hi,
                  Ich habe mir das verlinkte Script angeschaut. Dies funktioniert allerdings nicht.

                  1. Om nah hoo pez nyeetz, Alex!

                    Ich habe mir das verlinkte Script angeschaut. Dies funktioniert allerdings nicht.

                    Ich versteh nicht, warum das Anschauen nicht funktioniert. Das Script funktioniert sehr wohl. Hier das fertige Skript: Endergebnis

                    Matthias

                    --
                    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Wachs und Wachstube.

                    1. Oh, sorry lag wohl an meinem Browser. Jetzt gehts :-).
                      Habt ihr villeicht noch eine Idee wie ich das hinbekomme, dass man per Klick auf einen Link ein Bild zurück, bzw. ein Bild weiter kommt?

    2. @@qx:

      nuqneH

      Bei mehr als einer Variable in einem if else musst du sie klammern!

      Du meinst bei mehr als einer Anweisung (statement).

      Best practice ist, immer Klammern zu setzen, auch bei nur einer Anweisung im Block. Dann kann man sie nicht vergessen, wenn es mehrere sind.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@Alex:

    nuqneH

    Hi,
    Ich versuche mich gerade an einem Bildwechselscript und habe dort ein Problem.

    Vielleicht versuchst du dich mal an dem Bildwechsel-Framework. Dann hast du am Ende nicht nur ein funktionierendes Script, sondern auch noch eine Menge gelernt.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)