funzione iterazione immagini

[maurocchio]

ho scritto questa funzione:

function scambio() {
show('s1')
for(i=1; i==23; i++){
j=i+1;
time1=i*1000;
div1="s"+i;
div2="s"+j;
setTimeout(function(){hide(div1)}, time1)
setTimeout(function(){show(div2)}, time1)
}
hide('s24');
setTimeout(function(){scambio()}, 1000)
}

in pratica ho creato 24 div, ognuno contenente un immagine e con proprietà display=none.
Questa funzione dovrebbe modificare iterativamente il valore di display da none a block e viceversa in modo da mostrare uno alla volta tutte le immagini a distanza di un secondo l'una dall'altra.
La prima versione (senza il ciclo) funziona, ed era scritta così
function scambio() {
show('s1')
setTimeout(function(){hide('s1')}, 1000)
setTimeout(function(){show('s2')}, 1000)
setTimeout(function(){hide('s2')}, 2000)
setTimeout(function(){show('s3')}, 2000)
setTimeout(function(){hide('s3')}, 3000)
setTimeout(function(){show('s4')}, 3000)
setTimeout(function(){hide('s4')}, 4000)
setTimeout(function(){show('s5')}, 4000)
setTimeout(function(){hide('s5')}, 5000)
setTimeout(function(){show('s6')}, 5000)
setTimeout(function(){hide('s6')}, 6000)
setTimeout(function(){show('s7')}, 6000)
setTimeout(function(){hide('s7')}, 7000)
setTimeout(function(){show('s8')}, 7000)
setTimeout(function(){hide('s8')}, 8000)
setTimeout(function(){show('s9')}, 8000)
setTimeout(function(){hide('s9')}, 9000)
setTimeout(function(){show('s10')}, 9000)
setTimeout(function(){hide('s10')}, 10000)
setTimeout(function(){show('s11')}, 10000)
setTimeout(function(){hide('s11')}, 11000)
setTimeout(function(){show('s12')}, 11000)
setTimeout(function(){hide('s12')}, 12000)
setTimeout(function(){show('s13')}, 12000)
setTimeout(function(){hide('s13')}, 13000)
setTimeout(function(){show('s14')}, 13000)
setTimeout(function(){hide('s14')}, 14000)
setTimeout(function(){show('s15')}, 14000)
setTimeout(function(){hide('s15')}, 15000)
setTimeout(function(){show('s16')}, 15000)
setTimeout(function(){hide('s16')}, 16000)
setTimeout(function(){show('s17')}, 16000)
setTimeout(function(){hide('s17')}, 17000)
setTimeout(function(){show('s18')}, 17000)
setTimeout(function(){hide('s18')}, 18000)
setTimeout(function(){show('s19')}, 18000)
setTimeout(function(){hide('s19')}, 19000)
setTimeout(function(){show('s20')}, 19000)
setTimeout(function(){hide('s20')}, 20000)
setTimeout(function(){show('s21')}, 20000)
setTimeout(function(){hide('s21')}, 21000)
setTimeout(function(){show('s22')}, 21000)
setTimeout(function(){hide('s22')}, 22000)
setTimeout(function(){show('s23')}, 22000)
setTimeout(function(){hide('s23')}, 23000)
setTimeout(function(){show('s24')}, 23000)
setTimeout(function(){hide('s24')}, 24000)
setTimeout(function(){scambio()}, 24000)
}

ma come si può vedere è estremamente ridondante. Volevo alleggerirla usando un ciclo for per assegnare dinamicamente id e tempo di ritardo.
Ho provato il passaggio dei dati senza il ciclo, ossia scritto così

i=1;
j=i+1;
time1=i*1000;
div1="s"+i;
div2="s"+j;
show('s1')
setTimeout(function(){hide(div1)}, time1)
setTimeout(function(){show(div2)}, time1)

e funziona, ma ovviamente solo per i div s1 ed s2

Le funzioni show e hide, sono queste:
function show(id) {
document.getElementById(id).style.display = "block";
}
function hide(id) {
document.getElementById(id).style.display = "none";
}

Qualcuno mi sa dire dov'è il problema? O meglio, ho capito che è il timeout inserito nel for che mi da il problema, ma non so come risolverlo. Qualcuno ha qualche idea?
Grazie dell'attenzione

[IAL32]

E' sufficente che prima de setTimeout metti un ciclo for, prendiamo in esame il tuo codice:

//nDivs è il numero di divs totali da processare
//daTime è il tempo in millisecondi di base
function scambio(nDivs, daTime) {
	/* Qua aggiungiamo un ciclo for */
	for (i = 0; i <= nDivs ; i++) {
		//prima usiamo hide
		setTimeout(function() {
			hide("s" + i); //concateniamo a "s" il valore di i
		}, daTime);
		//poi usiamo show
		setTimeout(function() {
		//per comodità, e per sicurezza, mettiamo tra parentesi
		//la somma del valore iterativo e il numero 1
			show("s" + (i + 1));
		}, daTime);
		daTime += 1000;
	}
}

Già commentato.
Comunque non vedo dove tu abbia messo il ciclo for, non ne vedo alcuno nel tuo codice...
Allora, per capire come funziona il ciclo for, ti rimando a queste pagine:
http://www.w3schools.com/js/js_loop_for.asp
W3C contiene un esempio che fa proprio al caso tuo
http://www.html.it/pag/15280/ciclo-for/
Ho apprezzato molto che tu abbia almeno provato a fare il codice