nicht angemeldet
Bildanzeige-Seite
0 1 0 0 
Der Martin
0
Bildanzeige-Seite
Hallo Forum-Aktive,
kann bitte mal ein js-Kenner, der anders als ich kein Anfänger ist, über den folgenden Code schauen und mir sagen, ob der gewählte Weg einigermaßen so ist, "wie man es machen sollte".
Der Code erzeugt einen automatischen, zyklischen Bildlauf. Man kann ihn anhalten und fortsetzen, die Bildverweilzeit ändern und zurück- oder vorausliegende Bilder anspringen. Der Code tut, was er soll, aber mir kommt die Lösung extrem umständlich vor (ca. 70 Zeilen).
Für scharfe Kritik und Nennung von Sprachelementen, die ich vielleicht beseer hätte benutzen sollen, bin ich dankbar.
Auszuprobieren ist die Seite unter http://home.teleos-web.de/hhaase1/schwarzdorf/
Danke und mfG, Helmut
---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--
Anregung: http://de.selfhtml.org/javascript/objekte/images.htm#src
Voraussetzungen: Die Bilder stehen im Verzeichnis dieser Datei.
Die Bildnamen haben die Form ###Kette.jpg.
ist eine ganze Zahl von 001,002,..,nBild.
-->
<html><head><title>Bildlauf</title>
<script type="text/javascript">
// VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV EINGABE VVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV
var Titel = "Bilder aus Schwarzdorf";
var Loesch = "Die Bilder erlöschen Ende Oktober.";
var nBild = 8;
var Kette = "_SD";
// AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
function fAnima (){
i=parseFloat(document.Formular.iin.value);
if (i<0 || i>nBild) {i=0;}
if (i == nBild){i=0;} // Endlosschleife durch Rekursion
tt = parseFloat(document.Formular.thalte.value);
if (tt == 0){return;}
t=tt*1000;
document.images[0].src = b[i].src; // Ersetzt Bild
i = i + 1;
document.Formular.iin.value=i;
aktiv=window.setTimeout("fAnima()", t);
} // Ende function
function fStartStop ()
{
if (ss == 0) {window.clearTimeout(aktiv); ss=1; }
else {window.setTimeout("fAnima()"); ss=0;}
return ss;
}
function fblank(n){var z=" "; for(var i=1;i<=n;i++){z=z+" ";}return z;}
function fnline(n){var z="<br>"; for(var i=1;i<=n;i++){z=z+"<br>";}return z;}
</script></head>
<body style="position:absolute; top: 15px;">
<img src="001_Breslau.jpg" height="490" alt="jpg-Bild"> <!-- Anfangsbild -->
<script type="text/javascript">
var b = new Array(nBild);
var ss = 0; // Stopp/Start-Steuerung
for(var k =0; k <= nBild-1; k=k+1)
{
c=k+1;
b[k] = new Image();
if(k<9) b[k].src = "00"+c+Kette+".jpg"; // Auffüllen mit Nullen auf drei Stellen
else if(k<99) b[k].src = "0"+c[k]+Kette+".jpg"; // der "+"-Operator verkettet hier Strings
else b[k].src = c[k]+Kette+".jpg"; //
}
var i = 0;
</script>
<div style="position:fixed; left:700px; width: 300px; top: 15px;">
<script type="text/javascript">
document.write('<b>'+Titel+'</b><br><br>'+Loesch+fnline(20)+'Hinweis<br>'+
'Der automatische Bildlauf kann durch Eingaben in die beiden Zahlenfelder beeinflusst werden.')
</script>
</div>
<form name="Formular" action="">
<input type="text" name="thalte" value="3.5" size="1" />
<script type="text/javascript"> document.write('Sekunden'+fblank(42)); </script>
<input type="button" value="Halt / Weiter" onclick="fStartStop()">
<script type="text/javascript"> document.write(fblank(47)); </script>
<input type="text" name="iin" value="0.0" size="1" />
<script type="text/javascript">document.write(' von '+nBild); fAnima() </script>
</form>
</body></html>
-
»»Der Code tut, was er soll, aber mir kommt die Lösung extrem umständlich vor
Ich sollte noch erwähnen, dass der Code nur im FIREFOX tut, was er soll; im ie macht er auch alles - bis auf das Anzeigen der Bilder!
MfG, Helmut
-
Ich sollte noch erwähnen, dass der Code nur im FIREFOX tut, was er soll; im ie macht er auch alles - bis auf das Anzeigen der Bilder!
MfG, HelmutDas hat sich erledigt. Die Bilder entstanden durch Exportieren von mit Adobe Illustrator erzeugten Vektorgraphiken in das jpg-Format. Das Ergebnis ist offenbar für das Web nicht zu gebrauchen. Mit kameraerzeugten jpgs geht es.
Es bleibt nur die ursprüngliche Anfrage.
MfG Helmut
-
-
Hallo,
Für einen Anfänger nicht übel.
Für [...] Nennung von Sprachelementen, die ich vielleicht besser hätte benutzen sollen, bin ich dankbar.
Folgendes fällt mir auf:
Dein Code
if (i<0 || i>nBild) {i=0;} if (i == nBild){i=0;} // Endlosschleife durch Rekursionsoll wohl sicherstellen, dass 1) i immer >= 0 ist und 2) nicht größer wird, als die Anzahl verfügbarer Bilder.
Für 1) würde ich die Zahl ggf. positiv machen und für 2) den Modulo-Operator einsetzen:if (i<0) i = i * -1; // oder kürzer: if (i<0) i *= -1; // oder so: i<0 && (i*=-1);(D.h.
(i *= -1)wird nur dann ausgeführt, wenni<0===truegilt, dafür sorgt der UND-Operator&&.i = i%nBild;Und beides zusammen:
(i=i%nBild) && i<0 && (i*=-1);Die Zuweisung
(i=i%nBild)evaluiert immer zu i (d.h. zutrue, wenn es nicht 0 wird).
Im Fall von 0 ist das Ergebnisfalse, die Zahl also nicht negativ, somit ist die Sache schon erledigt.
Falls ungleich 0 (Ergebnistrue) greift der folgende&&-Operator und es wirdi<0ausgewertet.
Falls dasfalseergibt, sind wir jetzt fertig, sonst greift schließlich noch der letzte&&-Operator:i*=-1wird ausgeführt (i wird also positiv gemacht), und gut.Weiß nicht, ob man es unbedingt so machen *sollte* (manchen erscheint das zu kryptisch), aber mir gefällt sowas, ganz nach dem Motto "in der Kürze liegt die Würze".
javascript ist ja eine Programmier*sprache*, und letzteres sieht mir mehr nach flüssiger Umgangssprache aus, während viele if und else etc. auf mich eher wie gestammelte Fremdsprache wirken :-)
Gruß, Don P
-
Hallo,
Es gibt auch noch die Methode
Math.abs(), die einen Wert positiv macht. Damit reduzieren sich deine beiden if-Zeilen zui = Math.abs(i) % nBild;Gruß, Don P
-
Mahlzeit,
Weiß nicht, ob man es unbedingt so machen *sollte* (manchen erscheint das zu kryptisch), aber mir gefällt sowas, ganz nach dem Motto "in der Kürze liegt die Würze".
javascript ist ja eine Programmier*sprache*, und letzteres sieht mir mehr nach flüssiger Umgangssprache aus, während viele if und else etc. auf mich eher wie gestammelte Fremdsprache wirken :-)ich hätte es nicht treffender ausdrücken können - zumal die kurzen, knappen Formulierungen oft auch leichter zu verstehen sind als "gestammelte Fremdsprache" - vorausgesetzt natürlich, man beherrscht die Sprache.
Das Ganze gilt für selbstverständlich Javascript ebenso wie für PHP oder C/C++.
Ciao,
Martin--
Wieso heißen die Dinger eigentlich Anrufbeantworter? Eigentlich sind es doch nur Anrufanhörer. -
Für einen Anfänger nicht übel.
Hallo Don P,
vielen Dank für Deine Hinweise. Ich werde die von Dir genannten Code-Alternativen ausprobieren und sie zu meinem Werkzeugkasten nehmen. Auf manche Dinge kommt man als Autodidakt einfach nicht, oder wenn überhaupt, dann erst spät. Ich bin aber froh, dass mein Ansatz im Grundsatz i.O. zu sein scheint. Das motiviert mich, den Stilmerkmalen "Prägnanz" und "Eleganz" mehr Gewicht zu geben.Herzliche Grüße, Helmut
-