JS - abspielen von Bildern

Rausch

Hallo Leute,

Ich habe Folgendes Problem und zwar. Ich habe den Auftrag verschiedne Bilder hintereinander zu zeigen. Das problem was ich hier habe ist, aber das es drei Bildboxen sind die gleichzeitig die Bilder wechseln soll. Ein ablauf kriege ich hin aber mit den andren zwei will es nicht so richtig klappen. Na ja mein JS kenntnise sind auch nicht so sehr groß. Vielleicht könnt ihr mir ja helfen oder ein denk anstoss geben.

Code

<script language='javascript' type='text/javascript'>
<!--


var bilder = new Array();


bilder[0]="bilder/wu_00.png";
bilder[1]="bilder/wu_01.png";
bilder[2]="bilder/wu_02.png";
bilder[3]="bilder/wu_03.png";
bilder[4]="bilder/wu_04.png";
bilder[5]="bilder/wu_05.png";
bilder[6]="bilder/wu_06.png";
bilder[7]="bilder/wu_07.png";
bilder[8]="bilder/wu_08.png";
bilder[9]="bilder/wu_09.png";
bilder[10]="bilder/wu_10.png";
bilder[11]="bilder/wu_11.png";
bilder[12]="bilder/wu_12.png";
bilder[13]="bilder/wu_13.png";
bilder[14]="bilder/wu_14.png";
bilder[15]="bilder/wu_15.png";
bilder[16]="bilder/wu_16.png";




var anzahl = bilder.length;
var i = 0;
var aktiv = window.setTimeout('vor()', 4000);


function play()
{
         window.clearTimeout(aktiv);
         aktiv = window.setTimeout('vor()', 4000);
}
function stop()
{
         window.clearTimeout(aktiv);

}


function vor()
{
         if ( i == (anzahl-1) )
         { i=0; }
         else
         { i++; }
         document.getElementById("bild1").src = bilder[i];
}
function zurueck()
{
         if ( i == 0 )
         { i=anzahl-1; }
         else
         { i--; }
         document.getElementById("bild1").src = bilder[i];
}


//-->
</script>

Alles anzeigen

HTML

<div id="bildbox_gemeinde_1">
                     <img src="bilder/wu_00.png" onload="play();" id="bild1" width="138px" height="92px" />
                     </div>
                     <div id="bildbox_gemeinde_2">
                      <img src="bilder/wu_00.png" onload="play();" id="bild2" width="138px" height="92px" />
                     </div>
                     <div id="bildbox_gemeinde_3">
                      <img src="bilder/wu_00.png" onload="play();" id="bild3" width="138px" height="92px" />
                     </div>

Pion

Code

<script language='javascript' type='text/javascript'>
<!--


var bilder = new Array();


bilder[0]="bilder/wu_00.png";
bilder[1]="bilder/wu_01.png";
bilder[2]="bilder/wu_02.png";
bilder[3]="bilder/wu_03.png";
bilder[4]="bilder/wu_04.png";
bilder[5]="bilder/wu_05.png";
bilder[6]="bilder/wu_06.png";
bilder[7]="bilder/wu_07.png";
bilder[8]="bilder/wu_08.png";
bilder[9]="bilder/wu_09.png";
bilder[10]="bilder/wu_10.png";
bilder[11]="bilder/wu_11.png";
bilder[12]="bilder/wu_12.png";
bilder[13]="bilder/wu_13.png";
bilder[14]="bilder/wu_14.png";
bilder[15]="bilder/wu_15.png";
bilder[16]="bilder/wu_16.png";




var anzahl = bilder.length;
var i = 0;


function play(a)
{


         aktiv = window.setTimeout('vor(a)', 4000);
}
function stop()
{
         window.clearTimeout(aktiv);

}


function vor(a)
{
         if ( i == (anzahl-1) )
         { i=0; }
         else
         { i++; }
         document.getElementById(a).src = bilder[i];
}
function zurueck()
{
         if ( i == 0 )
         { i=anzahl-1; }
         else
         { i--; }
         document.getElementById("bild1").src = bilder[i];
}


//-->
</script>
<div id="bildbox_gemeinde_1">
                     <img src="bilder/wu_00.png" onload="play('bild1');" id="bild1" width="138px" height="92px" />
                     </div>
                     <div id="bildbox_gemeinde_2">
                      <img src="bilder/wu_00.png" onload="play('bild2');" id="bild2" width="138px" height="92px" />
                     </div>
                     <div id="bildbox_gemeinde_3">
                      <img src="bilder/wu_00.png" onload="play('bild3');" id="bild3" width="138px" height="92px" />
                     </div>

Alles anzeigen

Ungetestet !

Rausch

Also ich kriege eine Fehlermeldung über Firebug. Der sagt das "a" nicht definiert ist. So dumme frage aber wie definiere ich dieses A. Danke schomal für deine Hilfe

Pion

Kannst du mir mal nen Ordner machen mit den Bilder und ja der Datei dann mach ich dir das, weil ich kann es net testen da ich die bilder etc nicht habe^^

Aber wahrscheinlihc musst du in den funktion var a = a oder so machen aber mach mir mal den Ordner

mfg

synaptic

nur ne idee... er kennt a nicht beim zweiten ausführen des timeouts..

Rausch

Ja ich mache die heut mittag ein ordner. Soll ich den dann dir per icq schicken ? danke für die hilfe =)

Pion

Lad ihn hier einfach hoch

mfg

Rausch

So sorry das es länger gedauert hat aber hier ist die datei. Danke nochmal!

Afrael

Code

function play(a)
{

         aktiv = window.setTimeout("vor('"+a+"')", 4000);
}

So ist nun richtig. Dein Fehler war, dass a innerhalb der Callback-Funktion nicht bekannt war.

Rausch

Hey,

danke es geht :). So jetzt noch eine frage. Kann ich in JS auch sagen das er weiche Übergänge machen soll ?

danke schonmal

Pion

Js meinst du fade in / fade out wenn ja dan hier;

http://www.kostenlose-javascripts.de/javascripts/bi…ade-effekt.html

Rausch

Nein das meinte ich nicht, ist zwar auch cool aber nicht ganz was ich suche. Also ich habe ja die bilder jetzt zumlaufen gekriegt. Dank euch beiden. Nur jetzt ist meine frage ob ich dazwischen also wenn die Bilder wechseln ein weichen übergang rein kriege.

Pion

ja mir schon klar in meinen augen ist das ein weicherübergang wenn das zuvor gezeigte bild immer schwächer wird bis es nicht mehr da ist.. also wasm einst du

Rausch

ja in dem sinne stimmt das ja, also schon richtig nur es soll halt automatisch sein. Also das man nicht mit der maus rüber geht sondern halt nach 4 sekunden das nächste bild weich reinkommt

visitor

...das sieht wirklich klasse aus mit den Bildern. Hat jemand vielleicht eine Idee ob es dazu auch so eine Art "Tagebuch" gibt, wo man Notizen zu den Bildern reinschreiben kann?

visitor

Tags