jQuery lepsze zarządzanie obiektami.

Tworząc ostatnio prosty slider, znalazłem ciekawy sposób na zarządzanie poszczególnymi obiektami. Zamiast za każdym razem łapać np poszczególne obrazki, możemy je przetrzymać w tablicy co, jak dla mnie, jest bardziej przejrzyste. Jednocześnie szybki tutorial jak zrobić slider 😀


images = $('#top-img img'); // łapiemy wszystkie obrazki do slajdów
		images.css('position','absolute'); // zmieniamy ich pozycje na absolute
		childcount = images.length-1; // liczymy je, -1 dlatego że są liczone od 0
		childs = Array();
		sumWidth = 0;
		sumHeight = 0;

		$.each(images, function(i,v){
			childs[i] = v; // każdy obiek wpisujemy do tablicy
			if(i > 0){
			sumHeight += $(v).outerHeight(true);
			sumWidth += $(v).outerWidth(true);
				$(v).css('left','-'+(sumWidth)+'px'); /*przesuwamy kolejne obrazki za pierwszy obrazek każdy kolejny o sumę szerokości wszystkich obrazkow przed nim */
				$(v).css('opacity','0'); // oraz je ukrywamy
			}

		});

		topslide(0);
/*
 tutaj po kolei animujemy obrazki z tablicy childs w prawo, kiedy animacja się wykona przesuwamy go o jego szerokość + szerokość animacji w lewo. Jeżeli animujemy ostatni element z tablicy, przechodzimy na pierwszy.
*/
		function topslide(i){
			$(childs[i]).animate({left : '+='+$(childs[i]).outerWidth()/4, opacity : 0},1600, function(){});
			$(childs[i]).animate({'left':'-='+($(childs[i]).outerWidth()+$(childs[i]).outerWidth()/4)},0);

			if(i==childcount){
				$(childs[0]).animate({left : '+='+$(childs[0]).outerWidth()/4, opacity : 0},0);
				$(childs[0]).animate({left : '+='+($(childs[0]).outerWidth()-($(childs[0]).outerWidth()/4)), opacity : 1},1600);
			} else {
				$(childs[i+1]).animate({left : '+='+$(childs[i+1]).outerWidth()/4, opacity : 0},0);
				$(childs[i+1]).animate({left : '+='+($(childs[i+1]).outerWidth()-($(childs[i+1]).outerWidth()/4)), opacity : 1},1600);
			}

			if(i < childcount){
				i++
			} else i = 0;

			setTimeout("topslide("+i+")",6000);
		}

About the author

Logos

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>