Selbst gebastelte Diashow...

OJMD

Hallo zusammen,

Ich versuche hier per Zufall Bilder anzeigen zulassen, was auch klappt.
Damit das ganze Toller wirkt möchte ich gerne dass das Bilde Ein- und Aus Fadet.
Das heißt ich muss eigentlich nur eine Schleife basteln die in einer bestimmten Zeit die CSS Werte von 0 auf 100 setzen. Nur wie muss das dann aufgebaut sein wenn ein Bild X ms Einfadet, X Sekunden stehen bleibt und dann X ms ausfadet.

Hier der Beispiel Code:

Code

<style type="text/css">
 <!--
  img#a1 {filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;}
 -->
</style>
 
<script language="JScript">
<!--
Bilder = new Array("DSC00068.JPG","DSC00053.JPG","DSC00070.JPG","DSC00071.JPG","DSC02655.JPG","DSC02659.JPG");
var zahlneu = '';
var zahlalt = '';


function TEST()
{
while (zahlneu == zahlalt) { zahlneu = Zufall(); }


Bild_1.innerHTML = "<img id=\"a1\" src=Hintergrundbilder/" + Bilder[zahlneu] + " width=150 border=1 style=\"border-style:solid;border-width:2px;border-color:#3366FF\">";


while (???) {
{
	document.getElementById("a1").style.filter  ????
}


	zahlalt = zahlneu; 
	setTimeout("TEST()", 6000);
}
function Zufall()
{
	var range = Bilder.length-1;
	zahl = range *(Math.random());
	zahl = Math.round(zahl);
	//document.write (range);
 return zahl;
}
// -->
</script>

Alles anzeigen

OJMD

So bin ein Stück weiter …

Was ich jetzt nur noch bräuchte ist eigentlich nur eine Funktion die mir immer eine Variable von 0 bis 100 hoch zählt und das in beliebiger Dauer zB. 1sec. -1min.

...

Dodo

naja jscript kann ich nicht wirklich, aber sagen dir die begriffe Rekursives Programmiren und window.setTimeout etwas?

OJMD

Danke Dodo, ... für diesen Post. ...

Natürlich weis ich was das ist , meine Frage bezog sich aufs anwenden dieser.

Gruß OJMD

synaptic

also zuerst mal folgender anreiz.... ich hab bisher nicht geschafft den style eines elements über das stylesheet zu ändern, da müssteste den entsprechenden fade-effekt in einign styles vorbereiten und dann die classNames des angezeigten bildes durchlaufen lassen..
mach das was im css oben steht direkt ins img-tag rein, dann kannste über document.getElementById().style.blablubb an den style rankommen.
dann würd ich zwe funktionen bauen, fadeIn() und fadeOut(), die entsprechend aufgerufen werden. die anzeigezeit sollte sich dann automatisch ergeben duch fadeIn und fadeOut dann würd ich nur mit einem timer arbeiten, den deklarierst du global (außerhalb von allen funktion im script-tag)
in den einzelnen funktionen kannste dann über TIMER = setTimout(funktion, zeitinmillisekunden) initialisieren

musste halt nur zusehen, daß der TIMER auch gecleared wird
clearTimeout(TIMER);
das könnte klappen, wenn du es am anfang in jede funktion reinschreibst,
denn du rufst ja innerhalb der funktion den timer wieder auf und initialisierst ihn neu... das script soll ja bstimmt unendlich laufen ...
ansonsten kannste ja auch irgendwo ne boolsche variable setzen, die auf true steht und anhand irgendeiner bedingung false wird....

OJMD

Hallo synaptic,

erstmal vielen Dank für Deine ausführliche Erläuterung die mir zeigt das ich auf dem richtigen Weg bin.

Den style über das stylesheet zu ändern habe ich hinbekommen und funktioniert super.
Ich tue mich momentan schwer die Funktionen für fadeOut() und fadeIn() hinzubekommen, ...

Gruß Oliver

synaptic

so schwer sollte des net werden(hoff ich^^)..
ich probier hier mal sowas wie nen pseudocode hinzubekommen..
du wolltest ja was, das bis 100 zählt... wenn ich mich recht erinnere

Code

<script>
var incount=0;  //hier benutze ich mal zwei variablen, da ich ja zur zeit net weiß, ob du des mit einer regeln könntest... ansonsten denke ich du bekommst des hin ;o)


var outcount=0;
var TIMER;
fadeIn(){
document.getElementById().style.bla= "";  //hier änderste deinen Style, evtl kannste die countvariable mitnutzen...


incount++;  //incount hochzählen
TIMER=setTimeout(fadeIn, 100); //in einem timeout die funktion aufrufen damit sie weiterzählt....




if(incount==100){clearTimeout(TIMER); incount = 0} //hier prüfst du ob incount die 100 schon erreicht hat- wenn JA dann soll der TIMER gecleared werden und incount auf 0 gesetzt werden
}
</script>

Alles anzeigen

fadeout macht an sich nix anderes.. nur die stylevergabe is dann anders, oder du zählst runter evtl kannst du ja auch die incount und outcount-variablen nutzen um sie im style zu verwenden- hab ich in die "comments" geschrieben

ich hoff des gibt dir nen neuen denkansatz..

wenn alles läuft poste doch hier bitte den kompletten quellcode... das fertige produkt interessiert mich, hab nur leider keine zeit des selber zu schreiben.

Tags