Problem mit Array
Kai
- javascript
0 Struppi0 H-P Ortner0 Kai
Hi!
Ich möchte eine Bildergalerie mit JavaScript machen. Dazu habe ich folgendes geschrieben, was aber nicht funktioniert:
________________________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
var Bilder = new Array();
b[0] = new Image();
b[0].src = "bilder/middle3.png";
b[1] = new Image();
b[1].src = "bilder/middle2.png";
b[3] = new Image();
b[3].src = "bilder/middle1.png";
var i = 0;
function BildWechselNext() {
if(i >= 3){
i=0;
document.getElementById("middle").src = Bild[i].src;
i++;
} else{
document.getElementById("middle").src = Bild[i].src;
i++;
}
function BildWechselBack() {
if(i < 0){
i = 3;
b = i-1;
document.getElementById("middle").src = Bild[b].src;
} else{
i-1;
document.getElementById("middle").src = Bild[b].src;
}
}
</script>
</head>
<body>
<a href="#"><img src="bilder/border.png" id="border_left" width="96" height="544" alt="border_left" style="border:none;" onmouseover="MOverBack()" onmouseout="MOutBack()" onclick="BildWechselBack()"></a>
<img src="bilder/middle1.png" id="middle" width="600" height="544" alt="middle1" style="border:none;">
<a href="#"><img src="bilder/border.png" id="border_right" width="96" height="544" alt="border_right" style="border:none;" onmouseover="MOverNext()" onmouseout="MOutNext()" onclick="BildWechselNext()"></a>
</body>
</html>
________________________________________________________________________
Die JavaScriptkonsole gibt mir zurück, dass BildWechselBack() und BildWechselNext() nicht definiert seien und verweist auf Zeile1.
Ich bin mit meinem Latein am Ende...
Ich bedanke mich für jede Hilfe schon im Vorraus!
MfG, Kai
________________________________________________________________________
Die JavaScriptkonsole gibt mir zurück, dass BildWechselBack() und BildWechselNext() nicht definiert seien und verweist auf Zeile1.
Das Glaube ich nicht.
Struppi.
Hi!
Ok, ich habe den Fehler dafür gefunden. Aber jetzt habe ich das Problem, dass ich trotzdem noch einen Fehler gemacht habe. Der Next-Button funktioniert ausgezeichnet, bis i wieder auf 0 gestellt werden soll. Das wird nicht gemacht. Und das mit dem Backbutton funktioniert überhaupt nicht. Wie muss ich diese Bedingungen schreiben, dass sie funktionieren?
________________________________________________________________________
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script>
var Bilder = new Array();
Bilder[0] = new Image();
Bilder[0].src = "bilder/middle3.png";
Bilder[1] = new Image();
Bilder[1].src = "bilder/middle2.png";
Bilder[3] = new Image();
Bilder[3].src = "bilder/middle1.png";
var i = 0;
function BildWechselNext() {
if(i >= 3){
i=0;
document.getElementById("middle").src = Bilder[i].src;
i++;
} else{
document.getElementById("middle").src = Bilder[i].src;
i++;
}
}
function BildWechselBack() {
if(i <= 0){
i = 3;
b = i-1;
document.getElementById("middle").src = Bilder[b].src;
} else{
c = i-1;
document.getElementById("middle").src = Bilder[c].src;
}
}
</script>
</head>
<body>
<a href="#"><img src="bilder/border.png" id="border_left" width="96" height="544" alt="border_left" style="border:none;" onmouseover="MOverBack()" onmouseout="MOutBack()" onclick="BildWechselBack()"></a>
<img src="bilder/middle1.png" id="middle" width="600" height="544" alt="middle1" style="border:none;">
<a href="#"><img src="bilder/border.png" id="border_right" width="96" height="544" alt="border_right" style="border:none;" onmouseover="MOverNext()" onmouseout="MOutNext()" onclick="BildWechselNext()"></a>
</body>
</html>
________________________________________________________________________
Vielen Dank!
Kai
PS: Die Konsole zeigte das wirklich an, aber der Fehler war, dass ich eine Klammer vergessen hatte :)
<script>
hier fehlt das type Attribut, aber das weißt du vermutlich.
var Bilder = new Array();
Bilder[0] = new Image();
Bilder[0].src = "bilder/middle3.png";Bilder[1] = new Image();
Bilder[1].src = "bilder/middle2.png";Bilder[3] = new Image();
Bilder[3].src = "bilder/middle1.png";var i = 0;
function BildWechselNext() {
if(i >= 3){
i=0;
document.getElementById("middle").src = Bilder[i].src;
i++;
} else{
document.getElementById("middle").src = Bilder[i].src;
i++;
}
}
Besser in etwa so:
function BildWechselNext()
{
if(i >= Bilder.length) i = 0;
document.getElementById("middle").src = Bilder[i++].src;
}
function BildWechselBack()
{
if(i < 0) i = Bilder.length - 1;
document.getElementById("middle").src = Bilder[i--].src;
}
PS: Die Konsole zeigte das wirklich an, aber der Fehler war, dass ich eine Klammer vergessen hatte :)
und das stand nicht der Konsole?
Struppi.
Hallo Kai!
Ich hab ein weinig aufgeräumt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
var Bild= new Array();
Bild[0]= new Image();
Bild[0].src= "bilder/middle1.png";
Bild[1]= new Image();
Bild[1].src= "bilder/middle2.png";
Bild[2]= new Image();
Bild[2].src= "bilder/middle3.png";
var i= 0;
var b;
function BildWechselNext() {
if(i >= 2) {
i=0;
} else {
i++;
}
document.getElementById("middle").src= Bild[i].src;
}
function BildWechselBack() {
if(i <= 0) {
i= 2;
} else {
i--;
}
document.getElementById("middle").src= Bild[i].src;
}
//-->
</script>
</head>
<body>
<a href="#"><img src="bilder/border.png" id="border_left" width="96" height="544" alt="border_left" style="border:none;" onclick="BildWechselBack()"></a>
<img src="bilder/middle1.png" id="middle" width="600" height="544" alt="middle1" style="border:none;">
<a href="#"><img src="bilder/border.png" id="border_right" width="96" height="544" alt="border_right" style="border:none;" onclick="BildWechselNext()"></a>
</body>
</html>
Viele Grüße
H-P Ortner
Hi!
Ok, ich habe es verstanden, wie ich es machen muss. Vielen Dank!
:-) Kai