jquery setInterval

fredolin

Erfahrenes Mitglied
Hallo,

ich bastle mal wieder an einer Webseite rum und hab nun ein kleines Problem.
Ich habe im Kopfbereich Bilder, die über setInterval alle 5sec gewechselt werden sollen

hier mal mein Code, wo sich der Browser (Firefox) aufhängt

Javascript:
var numofPicture = 8;

var bildwechsler = function() {    
      for(var i = 0; i<= numofPicture; i++) {         
         $('#header').attr('class', 'headslider'+i);
      }
}

// hier hab ich vorerst die Variante per click in den wrapperbereich
$('#wrapper').click(function(bildwechsler) {
   setInterval(bildwechsler, 5000);
});

ich habe zu dem noch bullets, die ich anclicken kann um händisch die bilder zu wechseln.
Nun wäre es toll, hilfe zu bekommen, wo ich beider zusammen legen kann, also das nach 5 sec automatisch da bild wechselt oder wenn man auf eines der bullet klickt.

Hier mein Code für das anklicken der Bullet

Javascript:
$('.imageclick').click(function() {
		$('#header').attr('class', 'headslider'+ $(this).attr('id'));
	});

Um die großen Bilder an zu zeigen habe ich diese im css in zeinzelne classen als backgroundbilder erstellt und diese lasse ich nun über attribut class somit wechseln. Wenn Ihr da ne besser Idee habt auch da würde ich mich sehr freuen.. aber wichtig ist für mich, das ich was lernen kann, da ich mit jQuery erst begonnen habe.

Gruß
Fredolin
 
Zuletzt bearbeitet von einem Moderator:
Ui.. bis lang konnte mir noch keine einen Ansatz oder Hilfe geben. Ich hoffe doch das mir da eine helfen kann oder nicht?
 
So vielleicht:

Javascript:
<script type="text/javascript">
// in der Variable aktuell wird der Index des aktuell angezeigten Bildes gespeichert
var aktuell = 0;
// das Array bilder enthält alle Bilder die im Wechsel angezeigt werden sollen
var bilder = Array("1.png", "2.png", "3.png", "4.png", "5.png");
// Bildwechsel alle 2 Sekunden ausführen
var bildwechsel = setInterval("wechsel_automatisch()", 2000);

// beim Anklicken wird das Bild manuell gewechselt
function wechsel_manuell(id) {
	aktuell = id;
	document.getElementById("gross").src = "pic/" + bilder[aktuell];
}
// automatischer Bildwechsel
function wechsel_automatisch () {
	if ((aktuell + 1) < bilder.length) {
		aktuell++;
	} else {
		aktuell = 0;
	}
	document.getElementById("gross").src = "pic/" + bilder[aktuell];
}

</script>
HTML:
<div style="padding: 20px; width: 260px; height: 60px; background-color: #808080;">
    <img src="pic/1.png" width="260" height="60" id="gross" />
</div>
<p>---------</p>
<img src="pic/1.png" width="130" height="30" id="0" onclick="wechsel_manuell(0);" />
<img src="pic/2.png" width="130" height="30" id="1" onclick="wechsel_manuell(1);" />
<img src="pic/3.png" width="130" height="30" id="2" onclick="wechsel_manuell(2);" />
<img src="pic/4.png" width="130" height="30" id="3" onclick="wechsel_manuell(3);" />
<img src="pic/5.png" width="130" height="30" id="4" onclick="wechsel_manuell(4);" />
 
Hallo tombe,

ich finde deinen Code super, hab aber eine Frage. WIe wird denn der automatische Bilderwechsel angestoßen?
Wenn die Seite geladen ist, startet dieser dann automatisch nach x Zeit?

Gruß fredolin
 
Im obigen Code wird in Zeile 7 mit setInterval der automatische Wechsel gestartet, hier ist eine Spanne von 2 Sekunden eingestellt. Der Bildwechsel beginnt, so bald die Seite geladen ist.
 
Hallo Tomb,

erstmal danke für deine Hilfe und auch für deie Erklärung. Ich finde es super das man hier so geholfen wird.

Aber leider bekomme ich immer die Fehlermeldung, das hier in meinem Code "wechsel_automatisch is not defined".

Hier mein Code, denn ich für jQuery angepasst habe.

Javascript:
var numofHeader = Array('headslider', 'headslider1', 'headslider2', 'headslider3', 'headslider4', 'headslider5', 'headslider7', 'headslider8');
var aktuell = 0;
var wechsel_automatisch;
setInterval('wechsel_automatisch', 5000);
	
	function wechsel_automatisch() {
		if((aktuell +1) < numofHeader.lenght) {
			alert(aktuell);
			aktuell++;	
		} else {
			aktuell = 0;	
		}
		 $('#header').attr('class', 'headslider'+aktuell);
	};

Den Code für das clicken habe ich ja schon. aber hier würde ich sehr gerne hinzu fügen, wenn man geklickt hat, das sich der geklickte Bullet eine andere CSS Eigenschaft annimmt

Javascript:
$('.imageclick').click(function() {
		$('#header').attr('class', 'headslider'+ $(this).attr('id'));
	});

Da hab ich schon mit attr versucht aber dann passiert nichts.

Gruß Fredolin
 
Zuletzt bearbeitet von einem Moderator:
Du hast hier die Klammern vergessen:

Javascript:
//so hast du es
setInterval('wechsel_automatisch', 5000);
// und so muss es geschrieben werden
setInterval('wechsel_automatisch()', 5000);

Was den Wechsel der Klassen angeht, das kannst du so lösen:

Javascript:
function wechsel_manuell(id) {
	aktuell = id;
	document.getElementById("gross").src = "pic/" + bilder[aktuell];
	for (element = 0; element < bilder.length; element++) {
		document.getElementById(element).className = "class1";
	}
	document.getElementById(id).className = "class2";
}

Damit dieses Beispiel funktioniert, musst du zuerst zwei Klassen mit der Bezeichnung "class1" und "class2" erstellen und allen Bildern die Klasse "class1" zuweisen. Klickt man ein Bild an, erhält es die Klasse "class2".
 
Hallo tomb,

ich habe es auch mit der geschlossenen Klammer geschrieben. Doch da kommt auch immer die gleiche Fehlermeldung wie schin im Posting davor von mir beschrieben.

Hier mein aktueller Code

Javascript:
var numofHeader = Array('headslider', 'headslider1', 'headslider2', 'headslider3', 'headslider4', 'headslider5', 'headslider7', 'headslider8');
var aktuell = 0;
setInterval('wechsel_automatisch()', 5000);
	
	function wechsel_automatisch() {
		if((aktuell +1) < numofHeader.lenght) {
			alert(aktuell);
			aktuell++;	
		} else {
			aktuell = 0;	
		}
		 $('#header').attr('class', 'headslider'+aktuell);
	};

Ich habe auch schon vorher mit "var wechsel_automatisch" versucht, aber gleicher Fehlermeldung. Woran kann es nun noch liegen? Ich bin ratlos.

Gruß Fredolin
 
Zuletzt bearbeitet von einem Moderator:
Also ich habe deinen Codeausschnitt mal in mein Beispiel kopiert und damit getestet. Bei mir kommt der Fehler nicht.

Entweder du hast noch mehr Code und der Fehler ist dort versteckt oder du hast es hier richtig eingestellt!?
 
Ich hab nun alles raus genommen aus meine js-datei. aber ich erhalte immer noch die >fehlermeldung?.. woran kann es denn noch liegen.. bin nun echt ratlos..

mmhh grrrr..
 
Zurück