Erstmal ein Willkommen im Forum.
Beim posten von code, bitte immer die
Code-Tags richtig setzen. Auch ein Blick in die
Fehlerkonsole ist öfters hilfreich.
Bei Variablen ist es besser, diese einheitlich zu formatieren und den ersten Buchstaben klein zu schreiben. Auch alle verwendete Variblen gleich zu Beginn mittsl
var oder
var-Block definieren:
Code:
var wechselZeit = 2000;
var imageArr = new Array(),
var xAnzahl = 0;
var xCounter = -1;
oder
Code:
var wechselZeit = 2000,
imageArr = new Array(),
xAnzahl = 0,
xCounter = -1;
Arrays besser mit eckigen Klammern initialisieren
imageArr = [] und nicht so
imageArr = new Array(). Dieses kannst du auch im Block direkt befüllen und danach die Länge abfragen
Code:
// URL der Bilder hier eintragen
ImageArr = [
"01.jpg",
"02.jpg"
];
xAnzahl = imageArr.length;
Das kannst du natürlich, in der richtigen Reihenfolge, auch alles bei der Variablendefinition am Anfang machen und für später mal auch Kommentieren:
Code:
var wechselZeit = 2000, // Wartezeit bis zum nächsten Wechsel
imageArr = [ // URL der Bilder hier eintragen
'01.jpg',
'02.jpg'
],
xAnzahl = imageArr.length, // Anzahl der Bilder im Array
xCounter = -1; // Aktueller Index für das Bilderarray
Dem
setTimeout() die Funktion nicht als String (Zeichenkette) übergeben, da diese sonst vorher noch evaluiert (
eval()) werden muss und zu Problemen mit übergebenen Variablen führen kann. Einfach nur als Referenz übergeben
setTimeout(bildwechsel01, 4000);Sollte die Funktion Parameter benötigen das mittels
function () {...} übergeben:
Code:
setTimeout(function () {
bildwechsel01(parameter_1, parameter_2);
}, 4000);
Alles zusammen sähe dann so aus:
Code:
var wechselZeit = 2000, // Wartezeit bis zum nächsten Wechsel
imageArr = [ // URL der Bilder hier eintragen
'01.jpg',
'02.jpg'
],
xAnzahl = imageArr.length, // Anzahl der Bilder im Array
xCounter = -1; // Aktueller Index für das Bilderarray
function bildwechsel01() {
xCounter = xCounter + 1;
if (xCounter < xAnzahl) {
document.getElementById('Foto01').src = imageArr[xCounter];
setTimeout (bildwechsel01, wechselZeit);
} else {
xCounter = -1;
bildwechsel01();
}
}
// Startverzögerung
setTimeout(bildwechsel01, 4000);
Zu deinem Animationsproblem, entwerder mittels CSS3-Animation, wie schon erwähnt, verwenden, oder eine JavaScript-Bilbiothek wie z.B. AniJS verwenden.
