Optimieren eines Inhaltwechslers mit Javascript

[jobo]

Hallo,

die Aufgabenstellung lautete, in einem Div den Inhalt in regulierbarem Takt auszutauschen.

Wenn mir einer sagen könnte, wo im Javascript oder CSS noch was unschön ist, wäre ich dankbar. Hatte überlegt, das Unsichtbarmachen noch in eine Funktion auszulagern und auch überlegt, wie ich statt zwei setTimeouts in zwei Funktionen das eigentlich in einer machen könnte. Bin auch nicht sicher, ob ich nicht zu viele Variablen hab. Auch soll man nach Crockford ja eigentlich das "new" vermeiden, wenn möglich. Er meint im Vortrag, dass das fast immer möglich sei. Wüsste nicht, wie das hier geht. Auch weiß ich nicht, ob ältere IEs das mitmachen oder eine Browserweiche nötig wäre.

Meine vorläufige getesete Lösung:

  
<style>  
[code lang=css]  
#wechselrahmen {  
	border: 3px solid red;  
	width: 200px;  
	height: 200px;  
	position: relative;  
}  
#wechselrahmen div  {  
	position: absolute;  
	left:0px;  
	top:0px;  
}  

</style>
<div id="wechselrahmen">
<div style="background-color:green">
Div1
<br>
Plenty of Text.
Div1
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div1
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
<div style="background-color:yellow">
Div2
<br>
Plenty of Text.
Div2
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div2
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
<div style="background-color:brown">
Div3
<br>
Plenty of Text.
Div3
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div3
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
<div style="background-color:purple">
Div4
<br>
Plenty of Text.
Div4
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
<br>
Plenty of Text.
Div4
Plenty of Text.
Plenty of Text.
Plenty of Text.
Plenty of Text.
</div>
</div>
<script>

  
function RobsWechselrahmen () {  
	var secondsBetweenChanges = 2;  
	var milliSecondsBetweenChanges = secondsBetweenChanges * 1000;  
 	var wechselrahmen = document.getElementById("wechselrahmen");  
	var divsInside = wechselrahmen.getElementsByTagName("div");  
	var divsInsideCount = divsInside.length;  
	var actualDiv = 0;  
	var that = this;  
	this.startWechseln = function() {  
		for (var i=0; i < divsInsideCount; i++) {  
			if (i > 0) {  
				divsInside[i].style.visibility = "hidden";  
			}  
		}  
		setTimeout (that.wechseln, milliSecondsBetweenChanges);  
	}  
	this.wechseln = function () {  
		lastDiv = actualDiv;		  
		divsInside[lastDiv].style.visibility = "hidden";  
		if (actualDiv < divsInsideCount - 1)  {  
			actualDiv += 1;  
		} else {  
			actualDiv = 0;  
		}	  
		divsInside[actualDiv].style.visibility = "visible";  
		setTimeout (that.wechseln, milliSecondsBetweenChanges);  
	}  
}  
robsWechselrahmen = new RobsWechselrahmen();  
robsWechselrahmen.startWechseln();  

</script>
[/code]

Gruß

jobo

[LX]

Hallo!

Warum Du visibility statt display verwendest (in diesem Fall könntest Du sogar auf position: absolute verzichten), ist mir ein Rätsel. Die Objektorientierung bringt wenig, wenn das Ergebnis rein funktional ist. Den JS-Code kann man dementsprechend wesentlich einfacher gestalten:

  
(function(){  
var boxes=document.getElementById("wechselrahmen").getElementsByTagName('div'), pos=0;  
window.setInterval(function(){  
   var l=boxes.length, p=pos++;  
   while (l--) { boxes[l].style.display = l==p ? '' : 'none'; }  
}, 2000);  
})();

Statt einfach nur display:none/'' zu setzen, kann man zwischendrin natürlich optional noch Überblendungs- oder Rolleffekte einbauen.

Gruß, LX

[jobo]

Hallo,

Warum Du visibility statt display verwendest (in diesem Fall könntest Du sogar auf position: absolute verzichten), ist mir ein Rätsel.

Mir auch. Du hast Recht.

Die Objektorientierung bringt wenig, wenn das Ergebnis rein funktional ist.

Deshalb meine Frage.

Den JS-Code kann man dementsprechend wesentlich einfacher gestalten:

(function(){
var boxes=document.getElementById("wechselrahmen").getElementsByTagName('div'), pos=0;
window.setInterval(function(){
   var l=boxes.length, p=pos++;
   while (l--) { boxes[l].style.display = l==p ? '' : 'none'; }
}, 2000);
})();

>   
> Statt einfach nur display:none/'' zu setzen, kann man zwischendrin natürlich optional noch Überblendungs- oder Rolleffekte einbauen.  
  
Den Ternäroperator finde ich nach wie vor gewöhnungsbedürftig. Abgesehen davon, dass ich den Eindruck gewinne, dass kein Reset beim Erreichen der letzten Box eingebaut ist erstmal schön viel kürzer als mein Krempel (;-).  
  
boxes.length immer wieder neu bestimmen zu müssen fand ich redundant. Aber deswegen gleich ein Objekt erzeugen ist vermutlich wirklich überkandidelt.  
  
Merci, Gruß  
  
jobo

[LX]

(...) Abgesehen davon, dass ich den Eindruck gewinne, dass kein Reset beim Erreichen der letzten Box eingebaut ist erstmal schön viel kürzer als mein Krempel (;-).

Stimmt. Es muss also folgendermaßen heißen:

(function(){  
var boxes=document.getElementById("wechselrahmen").getElementsByTagName('div'), boxcount=boxes.length,pos=0;  
window.setInterval(function(){  
   pos=(pos+1)%boxcount;  
   var l=boxcount;  
   while (l--) { boxes[l].style.display = l==pos ? '' : 'none'; }  
}, 2000);  
})();

boxes.length immer wieder neu bestimmen zu müssen fand ich redundant.

Du kannst es wie im oben gezeigten Code zwischenspeichern, musst aber den Zähler vor der while-Schleife neu initialisieren.

Aber deswegen gleich ein Objekt erzeugen ist vermutlich wirklich überkandidelt.

Bitte verstehe mich nicht falsch: Objektorientierung ist eine tolle Sache - wenn sie einem weiterhilft, etwa wenn es darum geht, komplexe Vorgänge sauber zu kapseln oder aber zahlreiche Methoden zeit- und speichersparend zu vererben.

Gruß, LX

[jobo]

Hallo,

nach Jslint und Javascriptlint kommt folgendes raus:

  
(function(){  
	var boxes=document.getElementById("wechselrahmen").getElementsByTagName('div'), boxcount=boxes.length,pos=0;  
	setInterval( function() {  
		pos=(pos+1)%boxcount;  
		var l=boxcount;  
		while (l--) {  
			boxes[l].style.display = l===pos ? '' : 'none';  
		}  
	}, 2000);  
}());  

Warum ...style.display = ""; ausreicht, um display = "block"; zu erreichen verstehe ich noch nicht so ganz. Irgendwie juckts mich auch, dass der ja immer alle Divs durchgeht, eigentlich ja nur das aktuelle zurücksetzen müsste und das nächste "block" oder eben "" setzen zu müssen. Das Runterzählen und Modulo aber sieht ja ganz schick aus (;-). Die auslösenden Klammern am Ende sollten aber angeblich laut Crockfords jslint innerhalb der allumfassenden Klammer stehen.

Gruß

jobo

[Der Martin]

Hi,

Warum ...style.display = ""; ausreicht, um display = "block"; zu erreichen verstehe ich noch nicht so ganz.

weil das Löschen eines Wertes (oder das Setzen eines leeren Strings) automatisch den Defaultwert wirksam werden lässt.

Ciao,
 Martin

[jobo]

Hallo,

und mit Klick auf "The Good Parts" wird daraus:

  
(function () {  
	var boxes = document.getElementById("wechselrahmen").getElementsByTagName('div'), boxcount  = boxes.length, pos = 0;  
	setInterval(function () {  
		pos = (pos + 1) % boxcount;  
		var l = boxcount;  
		while (l) {  
			l -= 1;  
			boxes[l].style.display = l === pos ? '' : 'none';  
		}  
	}, 2000);  
}());  

Jetzt ist nur noch die eine Zeile "zu lang" eigentlich ist doch Schluss bei 80 oder 72.
Gruß

jobo

[JürgenB]

Hallo jobo,

Jetzt ist nur noch die eine Zeile "zu lang" eigentlich ist doch Schluss bei 80 oder 72.

das war so bei Fortran IV auf Lochkarten, die Stellen 73-80 wurden zur Nummerierung der Lochkarten benötigt.

Gruß, Jürgen

[jobo]

Hallo,

das war so bei Fortran IV auf Lochkarten, die Stellen 73-80 wurden zur Nummerierung der Lochkarten benötigt.

JSLint hat das aber immer noch als Option (aber es gehört nicht zu den "Good Parts" dazu (;-)).

Gruß

jobo

[JürgenB]

Hallo jobo,

das war so bei Fortran IV auf Lochkarten, die Stellen 73-80 wurden zur Nummerierung der Lochkarten benötigt.

JSLint hat das aber immer noch als Option (aber es gehört nicht zu den "Good Parts" dazu (;-)).

aber in Fortran war das damals eine strenge Regel: alles ab Spalte 73 wurde ignoriert. Ich hatte mal eine Formelzeile, die zu lang war, da wurden einfach die letzten Zeichen ignoriert, also aus ...wert1*wert2 wurde ...wert1*wert . Ich habe da "ewig" hinterher gesucht.

Gruß, Jürgen

[jobo]

Hallo Jürgen,

aber in Fortran war das damals eine strenge Regel: alles ab Spalte 73 wurde ignoriert. Ich hatte mal eine Formelzeile, die zu lang war, da wurden einfach die letzten Zeichen ignoriert, also aus ...wert1*wert2 wurde ...wert1*wert . Ich habe da "ewig" hinterher gesucht.

Etwa Mitte der 80er hat ein Diplomand in unserer Arbeitsgruppe fast zwei Wochen nach einem fehlenden Semikolon an einem Zeilenende gesucht. Das waren noch Zeiten einer PDP11 glaube ich. Und er hat auf den ausgedruckten Codeseiten gesucht (;-).

Gruß

jobo

[Struppi]

Hallo,

und mit Klick auf "The Good Parts" wird daraus:

(function () {
var boxes = document.getElementById("wechselrahmen").getElementsByTagName('div'), boxcount  = boxes.length, pos = 0;
setInterval(function () {
pos = (pos + 1) % boxcount;
var l = boxcount;
while (l) {
l -= 1;
boxes[l].style.display = l === pos ? '' : 'none';
}
}, 2000);
}());

>   
> Jetzt ist nur noch die eine Zeile "zu lang" eigentlich ist doch Schluss bei 80 oder 72.  
  
Finde ich auch und man kann nicht sofort erkennen, was der Name der Variabel und was ein Wert ist. Es ist aber kein Problem und durchaus üblich solche Zeile über mehrere umzubrechen  
  
~~~javascript
var boxes = document.getElementById("wechselrahmen").getElementsByTagName('div'),  
    boxcount  = boxes.length,  
    pos = 0  
;  

Oder ähnlich, da die Zeile trotzdem noch zu lang ist, aber ob man deswegen eine Extra Variabel einführt oder den Ausdruck trennt, ist Geschmackssache.

Struppi.

[jobo]

Hallo,

var boxes = document.getElementById("wechselrahmen").getElementsByTagName('div'),

boxcount  = boxes.length,
    pos = 0
;

>   
> Oder ähnlich, da die Zeile trotzdem noch zu lang ist,  
  
(;-) genau. In der nächsten Zeile einfach weitermache wie bei PHP geht ja nicht. Und irgendein Sonderzeichen, wie bei VBA, mit der Bedeutung "weiter in der nächsten Zeile" gibts bei Javascript ja auch nicht.  
  
Gruß  
  
jobo

[Struppi]

Oder ähnlich, da die Zeile trotzdem noch zu lang ist,

(;-) genau. In der nächsten Zeile einfach weitermache wie bei PHP geht ja nicht.

Wieso sollte das nicht gehen?

Struppi.

[jobo]

Hallo,

Wieso sollte das nicht gehen?

Ich dachte bisher, Zeilenende wäre === ";".

document.
getElement.
ById("abc");

geht doch nicht, oder?

Gruß

jobo

[Struppi]

Wieso sollte das nicht gehen?

Ich dachte bisher, Zeilenende wäre === ";".

document.
getElement.
ById("abc");

geht doch nicht, oder?

probier's aus.

Struppi.

[jobo]

Hallo,

document.
getElement.
ById("abc");

geht doch nicht, oder?

probier's aus.

Ja, das dacht ich auch. Gunnar hats ja schon beschrieben.

  
<p id="test">testinhalt</p>  
<script>  
[code lang=javascript]  
alert (  
"hallo"  
);  
var test =  
document.  
getElementById(  
"test"  
);  
alert  
(  
test  
.innerHTML  
);  

</script>
[/code]#

... "funzt";

Gruß

jobo

[Der Martin]

Hi,

Wieso sollte das nicht gehen?
Ich dachte bisher, Zeilenende wäre === ";".

wenn's denn so wäre. Aber da man in Javascript das abschließende Semikolon am Zeilenende auch weglassen darf, ist es etwas komplizierter.

document.
getElement.
ById("abc");

geht doch nicht, oder?

Natürlich nicht, denn document hat keine Eigenschaft namens getElement, geschweige denn diese eine Methode ById().

Ciao,
 Martin

[Gunnar Bittersmann]

@@jobo:

nuqneH

Ich dachte bisher, Zeilenende wäre === ";".

Das Semikolon am Ende eines Statements ist in JavaScript nicht erforderlich. Was nicht als Aufforderung missverstanden werden soll, es nicht zu setzen.

document.
getElement.
ById("abc");

geht doch nicht, oder?

Natürlich nicht. 'document' hat kein Unterelement 'getElement', welches eine Methode 'ById()' hätte.

Es geht sowohl

document.  
getElement.ById("abc");

als auch

document  
.getElement.ById("abc");

Zu Zeilenumbrüchen in Strings siehe http://forum.de.selfhtml.org/archiv/2010/8/t199620/#m1343624 ff.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Es geht sowohl […]

Argl, nichts davon, sondern

document.  
getElementById("abc");

als auch

document  
.getElementById("abc");

Nun mach mal keinen Punkt, Ingunnarid!

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

document

.getElementById("abc");

  
Ich bevorzuge dann zusätzlich Einrückungen, z.B.  
  
~~~javascript
var neu = "irgendeinbeispieltextderirgendwasaussagensolloderaberauchnicht"  
    .replace(…)  
    .replace(…)  
    .replace(…);

Cü,

Kai

[jobo]

Hallo,

[latex]Mae  govannen![/latex]

document

.getElementById("abc");

>   
> Ich bevorzuge dann zusätzlich Einrückungen, z.B.  
>   
> ~~~javascript

var neu = "irgendeinbeispieltextderirgendwasaussagensolloderaberauchnicht"  

>     .replace(…)  
>     .replace(…)  
>     .replace(…);

Du meinst acht Leerzeichen davor statt vier?

Aber was sagt Jslint oder Javascriptlint dazu?

  
var neu = "abölkjölkjölkmjölkmjlökmjpaaaaaaaaaaaaaaaaaaaaaaaa"  
     + "asdfasdfasdf";  

"Problem at line 2 character 6: Expected '+' at column 9, not column 6.

• "asdfasdfasdf";"

So aber gehts durch:

  
var neu = "abölkjölkjölkmjölkmjlökmjpaaaaaaaaaaaaaaaaaaaaaaaa"  
    + "asdfasdfasdf";  

Also wohl hauptsache in Spalte 5 _oder_ 9 beginnen...;

Gruß

jobo

[Gunnar Bittersmann]

@@jobo:

nuqneH

Du meinst acht Leerzeichen davor statt vier?

Hoffentlich weder acht noch vier, sondern ein Tabulatorzeichen.

Qapla'

[Kai345]

[latex]Mae  govannen![/latex]

@@jobo:

nuqneH

Du meinst acht Leerzeichen davor statt vier?

Hoffentlich weder acht noch vier, sondern ein Tabulatorzeichen.

SELFverständlich.

var xy = "hjdskjsdölwskvsuhssgvslhsjsläpssnöosjhhs"  
\t.replace(...)  
\t.replace(...);

Und @jobo: JSLint ist mir inzwischen ziemlich egal, nachdem ein Code (immerhin ~100K, ähm, na ja, eher 50K; der Rest ist Dokumentation), der noch vor 1.5 Monaten _komplett_ fehlerfrei durchlief, vor einer Woche auf einmal > 70 Fehler geworfen hat, obwohl ich nicht ein einziges Zeichen geändert habe. Wenn Herr Crockford der Meinung ist, nur einen einzigen Programmierstil zu erlauben, dann kann er mich mal. Ein Tool soll auf (potentielle)_FEHLER_ aufmerksam machen, nicht aber alle Programmierstile ablehnen, die Herrn Crookford nicht passen. Und diese Fehler ließen sich durch keine Option verhindern. Ich seh' jedenfalls nicht ein, die wirklichen Fehler zwischen Unmengen Pseudo-Fehlern herauspicken zu müssen. Benutze ich halt javascriptlint. *shrug*

Cü,

Kai

[jobo]

Hallo,

[latex]Mae  govannen![/latex]

@@jobo:

nuqneH

Du meinst acht Leerzeichen davor statt vier?

Hoffentlich weder acht noch vier, sondern ein Tabulatorzeichen.

SELFverständlich.

var xy = "hjdskjsdölwskvsuhssgvslhsjsläpssnöosjhhs"

\t.replace(...)
\t.replace(...);

>   
> Und @jobo: JSLint ist mir inzwischen ziemlich egal, nachdem ein Code (immerhin ~100K, ähm, na ja, eher 50K; der Rest ist Dokumentation), der noch vor 1.5 Monaten \_komplett\_ fehlerfrei durchlief, vor einer Woche auf einmal > 70 Fehler geworfen hat, obwohl ich nicht ein einziges Zeichen geändert habe. Wenn Herr Crockford der Meinung ist, nur einen einzigen Programmierstil zu erlauben, dann kann er mich mal. Ein Tool soll auf (potentielle)\_FEHLER\_ aufmerksam machen, nicht aber alle Programmierstile ablehnen, die Herrn Crookford nicht passen. Und diese Fehler ließen sich durch keine Option verhindern. Ich seh' jedenfalls nicht ein, die wirklichen Fehler zwischen Unmengen Pseudo-Fehlern herauspicken zu müssen. Benutze ich halt javascriptlint. \*shrug\*  
  
Naja, es gibt ja auch nocht javascriptlint (s.o.) und dann dachte ich jetzt, Leerzeichen statt Tabulatoren wären das Mittel der Wahl. Mir ist so, als wenn das Zendframework das auch so macht. Python ja sowieso.  
  
Mein Editor kann mit Leerzeichen umgehen, das lässt sich einstellen, wieviel Leerzeichen ein Tab ergeben soll. Ich hatte jetzt irgendwie den Eindruck gewonnen, Tabs wären "out", ums mal lax zu formulieren (mir ist schon klar, dass es beim Programmieren kein "out" gibt, eher "best practice")  
  
Gruß  
  
jobo

[Kai345]

[latex]Mae  govannen![/latex]

Mein Editor kann mit Leerzeichen umgehen, das lässt sich einstellen, wieviel Leerzeichen ein Tab ergeben soll. Ich hatte jetzt irgendwie den Eindruck gewonnen, Tabs wären "out", ums mal lax zu formulieren (mir ist schon klar, dass es beim Programmieren kein "out" gibt, eher "best practice")

Glaubenskriege "das macht man so oder so" haben mich noch nie sehr interessiert; ich folge Trends auch nur, wenn sich für mich ein Mehrwert ergibt. Für mich war es eine Frage des "Praktischen". Ich habe eigentlich schon immer bevorzugt mit einer Einrückung von 3 gearbeitet, als ich dann Crockfords "one var" umgesetzt habe, war eine 4-er Einrückung praktischer:

//drei  
var a,  
   b,  
   c;  
  
//vier  
var a,  
    b,  
    c;

Alles, was ich machen mußte, war den Wert im Editor zu ändern und fertig. Hätte ich Leerzeichen benutzt, wäre es viel mehr Aufwand gewesen. Außerdem wird die Datei kleiner, was freilich heutzutage keine große Rolle mehr spielen sollte; weder bezüglich HDD-Platz noch der Übertragung im Web. Aber wenn man das von früher™ her gewohnt ist, wird man es nicht so schnell wieder los :)

Cü,

Kai

[jobo]

Hallo,

[latex]Mae  govannen![/latex]

Mein Editor kann mit Leerzeichen umgehen, das lässt sich einstellen, wieviel Leerzeichen ein Tab ergeben soll. Ich hatte jetzt irgendwie den Eindruck gewonnen, Tabs wären "out", ums mal lax zu formulieren (mir ist schon klar, dass es beim Programmieren kein "out" gibt, eher "best practice")

Glaubenskriege "das macht man so oder so" haben mich noch nie sehr interessiert; ich folge Trends auch nur, wenn sich für mich ein Mehrwert ergibt. Für mich war es eine Frage des "Praktischen". Ich habe eigentlich schon immer bevorzugt mit einer Einrückung von 3 gearbeitet, als ich dann Crockfords "one var" umgesetzt habe, war eine 4-er Einrückung praktischer:

//drei

var a,
   b,
   c;

//vier
var a,
    b,
    c;

>   
> Alles, was ich machen mußte, war den Wert im Editor zu ändern und fertig. Hätte ich Leerzeichen benutzt, wäre es viel mehr Aufwand gewesen. Außerdem wird die Datei kleiner, was freilich heutzutage keine große Rolle mehr spielen sollte; weder bezüglich HDD-Platz noch der Übertragung im Web. Aber wenn man das von früher™ her gewohnt ist, wird man es nicht so schnell wieder los :)  
  
Das können manche Editoren auch automatisch:  
  
<http://jens.hatlak.de/scite.php4>  
  
"Die Tab-Taste ist so konfigurierbar, dass sie Leerzeichen statt Tabs einfügt und das auch auf Selektionen angewandt sowie rückwärts (Einrückungen löschend)!"  
  
  
Abgesehen davon, [Best-Practice beim Zend Framework](http://framework.zend.com/manual/en/coding-standard.php-file-formatting.html):  
  
"Indentation should consist of 4 spaces. Tabs are not allowed."  
  
  
  
  

>   
> Cü,  
>   
> Kai  

Gruß  
  
jobo

[Gunnar Bittersmann]

@@jobo:

nuqneH

"Die Tab-Taste ist so konfigurierbar, dass sie Leerzeichen statt Tabs einfügt

Warum in aller Welt sollte man ein richtiges Zeichen durch mehrere falsche ersetzen?

Abgesehen davon, Best-Practice beim Zend Framework:

"Indentation should consist of 4 spaces. Tabs are not allowed."

„Es ist dringend empfehlenswert, *immer*[1] auf Programmierer zu verzichten, die die Tabulatorreichweite ihres Editors nicht einstellen können und statt dessen eine streng definierte Anzahl Jobanzeigen aufzugeben.“ [Thomas J.S.]

S.a. gesamten Thread. S.a. Links in diesem Posting.

Qapla'

[jobo]

Hallo,

S.a. gesamten Thread.

(;-) ff.

Gruß

jobo

[jobo]

Hallo,

S.a. gesamten Thread.

(;-) ff.

ff.

Gruß

jobo

[Gunnar Bittersmann]

@@jobo:

nuqneH

ff.

nn. mit Präfix Unsi

Qapla'

[jobo]

Hallo,

Oder ähnlich, da die Zeile trotzdem noch zu lang ist,

(;-) genau. In der nächsten Zeile einfach weitermache wie bei PHP geht ja nicht.

Wieso sollte das nicht gehen?

  
(function () {  
	var boxes = document.getElementById("wechselrahmen")  
             .getElementsByTagName('div'),  
        boxcount  = boxes.length,  
        pos = 0;  
	setInterval(function () {  
		pos = (pos + 1) % boxcount;  
		var l = boxcount;  
		while (l) {  
			l -= 1;  
			boxes[l].style.display = l === pos ? '' : 'none';  
		}  
	}, 2000);  
}());  

So gehts bei JSLint auch durch, ohne Zeilenüberhang.

Gruß

jobo

[Gunnar Bittersmann]

@@jobo:

nuqneH

Warum ...style.display = ""; ausreicht, um display = "block"; zu erreichen verstehe ich noch nicht so ganz.

Hatten wir heute erst: https://forum.selfhtml.org/?t=202858&m=1370767 ff.

Irgendwie juckts mich auch, dass der ja immer alle Divs durchgeht, eigentlich ja nur das aktuelle zurücksetzen müsste und das nächste "block" oder eben "" setzen zu müssen.

Nicht mal das musst du.

Der einfache Weg ist:
Die ein-/auszublendenden 'div'-Elemente bekommen eine ID; wenn nicht im Markup, dann per JavaScript:

var boxes=document.getElementById("wechselrahmen").getElementsByTagName('div'), boxcount=boxes.length;  
for (var i = 0; i < boxcount; i++) boxes[i].id = "wechselbox" + 1;

Dynamisch änderst du lediglich ein Attribut eines Vorfahrenelements ("wechselrahmen" bietet sich an); das kann @class sein

var frame = document.getElementById("wechselrahmen");  
frame.className = "visiblebox" + n;

oder @data-visiblebox:

if (frame.dataset) frame.dataset.visiblebox = n;  
else frame.setAttribute("data-visiblebox", n);

Den Rest erledigt das Stylesheet:

#wechselrahmen>div { display: none}  
#wechselrahmen[data-visiblebox="1"] wechselbox1 { display: block }  
#wechselrahmen[data-visiblebox="2"] wechselbox2 { display: block }  
#wechselrahmen[data-visiblebox="3"] wechselbox3 { display: block }

usw. bzw. mit Klassen:

#wechselrahmen.visiblebox1 wechselbox1 { display: block }  
#wechselrahmen.visiblebox2 wechselbox2 { display: block }  
#wechselrahmen.visiblebox3 wechselbox3 { display: block }

Wenn du das für beliebig viele Wechselboxen haben willst und nicht MAXANZAHL von Regeln ins Stylesheet schreiben willst, kannst du auch die CSS-Regeln dynamisch per JavaScript generieren.

Qapla'

PS: Für fähige Browser natürlich auch gern ohne ID:

#wechselrahmen[data-visiblebox="1"]>div:nth-child(1) { display: block }  
#wechselrahmen[data-visiblebox="2"]>div:nth-child(2) { display: block }  
#wechselrahmen[data-visiblebox="3"]>div:nth-child(3) { display: block }