jquery setInterval

Ich weiss jetzt nicht wo aktuell der Schuh drückt, sollte es immer noch der Intervall sein, hier mal was zum anfangen:

Code: 
(function(interval, arr, prefix){
  return (setInterval(function() {
          arr.push(arr.shift());
          $('#header').prop('className', prefix+arr[0]);
    },interval));
})(8000, ['',1,2,3,4,5,6,7,8], 'headslider');

Ist eigentlich kein Anfang, ist schon alles was es braucht.:D

Was geht dort vor sich?

Es wird eine sogenannte anonyme funktion aufgerufen(eine ohne Namen).

Der Funktion werden die nötigen Argumente übergeben(bspw. intervall und Array).

Die Argumente sind überall im Geltungsbereich dieser Funktion sichtbar, so auch im callback des Intervalls den diese Funktion erzeugt(der von rd4eva erwähnte function-scope)

Innerhalb des Intervall-callbacks wird jetzt einfach immer das erste Array-Element entfernt und am Ende des Arrays angehangen.
Man braucht jetzt nur noch das erste Element abzufragen, das wars.

Im Prinzip ginge es noch einfacher:
Code: 
setInterval(function(arr,prefix) {
        arr.push(arr.shift());
        $('#header').prop('className', prefix+arr[0]);
    }, 2000,['',1,2,3,4,5,6,7,8],'headslider');

Hier werden die Argumente dem Interval-callback direkt übergeben. Knackpunkt: IE macht das erst ab v10 mit :p
 
Zuletzt bearbeitet:
Hallo,
und vorab einen riesigen DankeschönStrauß an alle die hier geholfen haben. Ja es haut wunder bar hin.

Nun hab ich nur noch ein kleinen Wunsch, das ich noch mit fadeIn und FadeOut erweitern könnte.

Hier mein Code
1.) per Click
Javascript: 
$('.imageclick').click(function() {	
		clickbutton($(this).attr('id'));							
	});
	
	
	function clickbutton(id) {
		$('#header').attr('class', 'headslider'+ id);
	}

2.) automatisch
Javascript: 
setInterval(function(arr,prefix) {
		arr.push(arr.shift());
		$('#header').prop('className', prefix+arr[0]);
	}, animationtime, ['',0,1,2,3,4,5,6,7,8], 'headslider');

und wenn ich die zweite Funktion, die ich von abuzze übernommen habe irgendwie so abänder könnte das ich die function clickbutton aufrufen könnte das wäre super. Ich habe da schon einiges dran rum probiert aber immer klappte es nicht.

gruß fredolin
 
Zuletzt bearbeitet von einem Moderator:
Siehst du abuzze deswegen ist vorkauen sch....
Er hat nämlich nichts gelernt sondern einfach copy&paste deine Lösung übernommen.

@fredolin
Wenn du es verstanden hättest dann hättest du gemerkt das
$('#header').attr('class', 'headslider'+ id); genau das gleiche ist wie $('#header').prop('className', prefix+arr[0]);.
 
rd4eva du das habe ich verstanden aber da ich bei der click-variante die id bekomme, brauche ich den klassen namen nicht unbeding mit zu schleifen und kann das dann gleich festschreiben.

und dein vorwurf, das ich nichts lerne sondern nur copy&paste mache stimmt nur bedingt. ich orientiere mich an dem was ich bekomme aber ich baue dann doch alles so um wie ich es dann auch verstehe. aber es gibt sachen, wo ich nochnicht alles verstehe und dann benutze ich es vorerst einmal. aber ich versuche dann es um zuschreiben in einen code den ich besser lesen und verstehen kann.

auch wenn ich manchmal dann in meinen posting auch wünsche für scripte nachfrage, dient es für mich als lernmittel. ich versuche dannauch die scripte so zu erweitern und bemühe mich vorab erstmal selber für eine lösung zu finden.

ich will mich hier nicht erklären, aber ich bedanke mich immer bei allen die mir helfen sei es komplette lösungen oder nur denkanstößen hier schreiben.

danke und noch mal danke..

gruß fredolin
 
rd4eva du das habe ich verstanden aber da ich bei der click-variante die id bekomme, brauche ich den klassen namen nicht unbeding mit zu schleifen und kann das dann gleich festschreiben.
Zum Vergrößern anklicken....
Nein du hast es eben nicht verstanden. Auch jetzt noch nicht.
Denn hättest du es verstanen wüsstest du
Javascript: 
$('#header').prop('className', prefix+arr[0]); 
// ist das gleiche wie
 $('#header').attr('class', 'headslider'+ id);
// Folglich ist
$('#header').prop('className', prefix+arr[0]);
// auch das gleiche wie
clickbutton(arr[0])
Und schon hättest du dein zweites Problem gelöst.
 
Ich möchte mich bei allen die hier mir geholfen haben rechtherzlich bedanken.
Denke das ich die anderen Sachen irgendwie anders hinbekomme in dem ich weiter lernen muss. Aber es freut mich immer wieder, hier helfende Hände zu finden. Danke und noch mals Danke..

Danke rd4eve
Danke abuzze
Danke Tomb

Gruß Fredolin
 
Hallo,

so ich habe wohlwohlend mir die WOrt von rd4eve zu gemüte genommen und habe mein problem selber noch mal überarbeitet.
ich habe anfangs mir den code von abuzze ausgeliehen.
abuzze hat gesagt.:
Ich weiss jetzt nicht wo aktuell der Schuh drückt, sollte es immer noch der Intervall sein, hier mal was zum anfangen:

Javascript: 
    (function(interval, arr, prefix){
      return (setInterval(function() {
              arr.push(arr.shift());
              $('#header').prop('className', prefix+arr[0]);
        },interval));
    })(8000, ['',1,2,3,4,5,6,7,8], 'headslider');

Ist eigentlich kein Anfang, ist schon alles was es braucht.

Was geht dort vor sich?

Es wird eine sogenannte anonyme funktion aufgerufen(eine ohne Namen).

Der Funktion werden die nötigen Argumente übergeben(bspw. intervall und Array).

Die Argumente sind überall im Geltungsbereich dieser Funktion sichtbar, so auch im callback des Intervalls den diese Funktion erzeugt(der von rd4eva erwähnte function-scope)

Innerhalb des Intervall-callbacks wird jetzt einfach immer das erste Array-Element entfernt und am Ende des Arrays angehangen.
Man braucht jetzt nur noch das erste Element abzufragen, das wars.

Im Prinzip ginge es noch einfacher:
Code :
Javascript: 
 setInterval(function(arr,prefix) {
            arr.push(arr.shift());
            $('#header').prop('className', prefix+arr[0]);
        }, 2000,['',1,2,3,4,5,6,7,8],'headslider');

Hier werden die Argumente dem Interval-callback direkt übergeben. Knackpunkt: IE macht das erst ab v10 mit

Geändert von abuzze (10.11.13 um 05:20 Uhr)
Zum Vergrößern anklicken....

doch es scheint dann immer wieder hier leute zu geben, die das ausliehen von codes nicht gut finden (ich unterstütze diese haltung) und geben dies dann auch in den betreffenen theards schriftlich wieder. natürlich hat dies mich angespornt, mein eigenen code doch zu schreiben.

rd4eve hat gesagt.:
Siehst du abuzze deswegen ist vorkauen sch....
Er hat nämlich nichts gelernt sondern einfach copy&paste deine Lösung übernommen.

@fredolin
Wenn du es verstanden hättest dann hättest du gemerkt das
$('#header').attr('class', 'headslider'+ id); genau das gleiche ist wie $('#header').prop('className', prefix+arr[0]);.
Zum Vergrößern anklicken....

ja was soll ich sagen. ich habe es selber geschaft, mir per jquery den Headwechsel so zu schreiben, so das er das tut was und wie ich es möchte.
denke das da einige eventuell auf ein plugIn oder Slider zurück gegriffen hätten, doch ich wollte es selber so schreiben, damit ich es auch verstehe.

es hat etwas gedauert, aber nunhabe ich es geschafft und zeige hier euch meinen code:

Javascript: 
var counter = 0;
var timeout = 12;
var animationtime = timeout * 1000;
var fadeOutTime = 5000;
var fadeInTime = 5000;
	
	setInterval(function() {
		showHeader();				  
	}, animationtime);
	
	function showHeader() {
		if(counter == 0) {counter++; return }
		$('#header').fadeOut(fadeOutTime, function() {
			$('#header').attr('class', 'headslider'+ counter).fadeIn(fadeInTime);
		 });
		counter == 8 ? counter = 0 : counter++;   
	}
	
	$('.imageclick').click(function() {	
		wechselHeader($(this).attr('id'));
		if($('imageclick').click){
			clearInterval;	
		}
	});
	
	
	function wechselHeader(id) {
		$('#header').fadeOut(fadeOutTime, function() {
			$('#header').attr('class', 'headslider'+ id).fadeIn(fadeInTime);
		 });
	}

ihr könnt euch das ergebnis auf meine webseite anschauen. http://www.webslay.de

sicherlich gibt es da stellen, wo man den code verbessern kann oder so optimieren kann das es vielleicht leistungsfähiger ist.
wenn ihr gern mir solche optimierungsvorschläge geben wollt, damit ich diese hier posten kann, dann sendet diese über mein kontaktformular auf meiner webseite
http://www.webslay.de zu. ich freue mich wenn ich dann hier eure vorschläge posten darf.

dennoch bedanke ich mich an alle mitposter hier bei meinen problem. danke und so bringt es spass.

lg fredolin
 
Zuletzt bearbeitet von einem Moderator:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück