Mérei Tamás webdesigner

Tutorial: jQuery carousel

Szerző:   |   2012-05-07

Még régebben készítettem ezt a kódot egy hasonló tutorial alapján. Néhány dolgot átírtam, kibővítettem benne. Mivel úgysem lesz időm mostanában videót csinálni, feltöltöm a forráskódot. Teleírtam kommentekkel ami segíti a kód megértését.

A "körhinta" működése azon alapszik, hogy az utolsó elemet mindig bemásoljuk az első elem elé. Ez az elem ilyenkor nem látszik az overflow: hidden miatt, viszont az "előző" gombra kattintva láthatóvá válik. A módszert követve mindig lesz egy elem az éppen látható elem előtt, tehát a "körhinta" végtelenített lesz.

Ha az egeret a kép fölé mozgatjuk akkor az animáció megáll és mindaddig nem indul tovább amíg el nem mozgunk róla.

A működő kódot ide kattintva tudod megnézni.

HTML forráskód


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Carousel</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/carousel.js"></script>
	<link rel="stylesheet" href="style.css"/>
	<script type="text/javascript">
		$(document).ready(function() {
			carousel();
		});
	</script>
</head>
<body>
	<div id="carousel">
		<div id="tabs-wrapper">
			<!-- elozo es kovetkezo gombok -->
			<div id="next"></div>
			<div id="prev"></div>
			<div id="tabs">
				<div class="tab"><img src="pics/1.jpg" title="elso"/></div>
				<div class="tab"><img src="pics/2.jpg" title="masodik"/></div>
				<div class="tab"><img src="pics/3.jpg" title="harmadik"/></div>
				<div class="tab"><img src="pics/4.jpg" title="negyedik"/></div>
				<div class="tab"><img src="pics/5.jpg" title="otodik"/></div>
				<div class="tab"><img src="pics/6.jpg" title="hatodik"/></div>
				<div class="tab"><img src="pics/7.jpg" title="hetedik"/></div>
				<div class="tab"><img src="pics/8.jpg" title="nyolcadik"/></div>
			</div>
			<!-- float feloldasa -->
			<div class="clear"></div>
			<!-- title tagek kiirasa -->
			<div class="title"></div>
		</div>
	</div>
</body>
</html>

CSS forráskód


* { padding: 0; margin: 0; outline: 0; border: 0 }
body { background: url('pics/bg-body.png') repeat-x top left #fff }
div.clear { clear:both }

div#carousel {
	width: 600px;
	margin: 50px auto;
	background: #fff;
	box-shadow: 0px 0px 20px #b4b4b4;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ddd
}
div#tabs-wrapper {
	width: 600px;
	height: 300px;
	overflow: hidden
}
div#tabs { position: relative }
div#tabs .tab {
	width: 600px;
	height: 300px;
	float: left
}
div#tabs-wrapper .title {
	color: #fff;
	padding: 20px;
	position: relative;
	top: -53px;
	font-family: verdana;
	font-size: 11px;
	background-color: rgba(0, 0, 0, 0.8);
	/* IE miatt kell */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"
}

div#next,
div#prev {
	width: 30px;
	height: 30px;
	background-image: url('pics/nav.png');
	position: absolute;
	z-index: 2;
	margin-top: 140px;
	cursor: pointer;
}
div#next { margin-left: 640px }
div#next:hover { background-position: -30px 0; }
div#prev {
	background-position: 0 -30px;
	margin-left: -70px
}
div#prev:hover { background-position: -30px -30px }

jQuery forráskód


function carousel() {

	// sebesség
	var speed = 3000;
	// időzítő
	var timer = setInterval("rotate()", speed);
	// tabok száma
	var tabs_number = $(".tab").length;
	// tab szélessége
	var tab_width = $(".tab").outerWidth();
	// eltolás
	var offset = tab_width * (-1);
	// összes tab szélessége
	var total_width = $("#tabs").width = tab_width * tabs_number;
	// első tab
	var first_tab = $(".tab:first");
	// első tab képe
	var first_img = $(".tab:first img");
	// utolsó tab
	var last_tab = $(".tab:last");

	// beállítjuk a konténer szélességét
	$("#tabs").css({"width" : total_width});

	// bemásoljuk az utolsó elemet az első elé, arra az esetre, ha az előző gombra kattint
	last_tab.insertBefore(first_tab);

	// az előző lépés miatt egyel csúsztatunk balra
	$("#tabs").css({"left" : offset});

	// aktívra állítjuk az első tab-ot
	first_tab.addClass("active");

	// kiírjuk az első kép title attribútumát
	$(".title").text(first_img.attr("title"));


	// következő gomb
	$("#next").click(function() {
		// megkeressük az aktív tabot
		var active_tab = $(".active");
		// etávolítjuk róla a classt
		active_tab.removeClass("active");
		// a következő tabra tesszük a classt
		active_tab.next().addClass("active");

		// a left értéket csökkentjük a tab szélességével
		// a parseInt elemzi a stringet és egész számmal tér vissza
		// ha nem számmal kezdődik akkor NaN-al tér vissza (not a number)
		var left_indent = parseInt($("#tabs").css("left")) - tab_width;
		
		// csak akkor hajtjuk végre az animációt, ha éppen nem fut másik animáció
		// a számot módosítva tudjuk befolyásolni az animáció sebességét
		$("#tabs:not(:animated)").animate({"left" : left_indent},500,function () {
				// az elsőt berakjuk az utolsó mögé
				$("#tabs div:first").insertAfter($("#tabs div:last"));
				$("#tabs").css({"left" : offset});
		});
		$(".title").text($(".active img").attr("title"));
	});

	
	// előző gomb
	// ugyanaz a módszer, csak visszafelé
	$("#prev").click(function() {
		var active_tab = $(".active");
		active_tab.removeClass("active");
		active_tab.prev().addClass("active");
		var left_indent = parseInt($("#tabs").css("left")) + tab_width;
		$("#tabs:not(:animated)").animate({"left" : left_indent}, 500,function(){
			$(".tab:last").insertBefore($(".tab:first"));
			$("#tabs").css({"left" : offset});
		});
		$(".title").text($("img").attr("title"));
	});


	// ha fölémzgunk az egérrel, megáll
	$("#tabs").hover(
		function() {
			// a clearInterval() metódus törli a setInterval() által beállított időzítőt
			clearInterval(timer);
		},
		function() {
			// a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként
			timer = setInterval("rotate()", speed);
		}
	);

};


// a rotate() függvény összesen annyit csinál, hogy "rákattint" a következő linkre
function rotate() {
	$("#next").click();
}

Mérei Tamás Webdesigner

Szerző

Mérei Tamás vagyok, webdesigner. Reszponzív weboldalak készítésével foglalkozom, grafikai tervezéstől a HTML + CSS kódolásig.

Ismerj meg! Nézd meg eddigi munkáimat! Lépj velem kapcsolatba!

44 hozzászólás

  1. DoubleW
    2013. augusztus 28. szerda - 20:47

    Szia!
    A kérdésem az lenne ha egy ilyen carousel-böl egy oldalon többet szeretnék egyszerre futtatni az hogy lehetséges? Próbáltam kettőt egymás mellé tenni de nem megy egyszerre a kettő. Előre is köszönöm a választ!

    • cyrex
      2013. szeptember 5. csütörtök - 14:23

      Ebből a fajtából nem tudsz többet elhelyezni, mivel nincsenek egyediesítve a class és id elnevezések.

  2. Rita
    2013. augusztus 12. hétfő - 22:13

    Szia! Ez nagyon jó lenne nekem, de a next és prev gombokat szeretném a képre tenni, hogy egy 600×250-es div-be beleférjen az egész. /Margók, keret nem lennének/ Hol kéne átméretezni? A jqueryt csak felhasználom, nem nagyon értem még. Bocsi és kösz!

    • cyrex
      2013. szeptember 4. szerda - 17:07

      Ezt a CSS-ben simán meg tudod csinálni.

  3. Tom007
    2013. április 19. péntek - 09:52

    Lenne egy olyan kérdésem hogy a blogodhoz mennyi idő alatt készítesz el egy sablont? 🙂

    • cyrex
      2013. április 19. péntek - 10:29

      Egy hétvége alatt megvan általában, ha van időm vele foglalkozni normálisan.

    • Tom007
      2013. április 19. péntek - 16:29

      Akkor hamar megvan. Nekem ez a sablon tetszik a legjobban, stílusos és egyedi.

  4. Poszagi András
    2013. március 23. szombat - 19:02

    Szia Cyrex!
    Olyan problémám lenne, hogy Nem lépteti a képeket.
    Teljesen süket. Mintha nem találná a carousel.js -t. Próbáltam tőled meghívni, és a saját szerveremről is.

    jQuery forráskód likje:
    view-source:http://andras.pozsgai.hu/js/carousel.js

    Html forráskód linkje:
    view-source:http://andras.pozsgai.hu/index.html

    CSS forráskód linkje:
    view-source:http://andras.pozsgai.hu/style.css

    Légyszíves mihamarabb válaszolj!

    • cyrex
      2013. március 23. szombat - 19:27

      Nem tudom miért nem működik. Lokálban se megy? Nézd meg, hogy egyáltalán működik e a JS. Írass ki valamit a JS fájl elején a konzolra, ha ott működik, akkor valamelyik kattintást kezelő függvényen belül.

    • Poszagi András
      2013. március 26. kedd - 19:49

      Köszönöm Cyrex!

    • Poszagi András
      2013. március 30. szombat - 14:47

      Cyrex megtaláltam a hibát amikor az újabb verzióra akartam váltani.
      A “”-ből hiányzó sorok ezek voltak:

              $(document).ready(function() {
                  carousel();
              });
      

      További kellemes böngészést!

  5. Tom007
    2013. március 18. hétfő - 10:41

    Szerintem ez jól néz ki és amilyen egyszerűnek tűnik elég hosszú kódja van. De hát akkor ennek? http://demo.pixelentity.com/?estro 🙂

    • cyrex
      2013. március 18. hétfő - 11:28

      Ennek sem hosszú, ha összehúzod egy sorba 😀
      pixelentity.com/previews/components/estro/js/pe.kenburns/jquery.pixelentity.kenburnsSlider.min.js

  6. feco132
    2013. március 9. szombat - 17:40

    Helló!

    Olyan problémát fedeztem fel, hogy ha sokszor kattintok a tovább nyílra, akkor egy idő után beakad a címek lapozása és felcserélődnek! 😮 Ezt a problémát hogyan lehet orvosolni?

    Köszönöm a válaszodat!

    • cyrex
      2013. március 20. szerda - 12:38

      Ezt nem próbálgattam 🙂 De, ha a kattintást kezelő függvényben előre teszed a title váltást, akkor az lehet, hogy megoldja a problémát. De az is megoldja, ha nem kattintgatsz, mint az őrült 🙂

  7. JMT
    2013. február 18. hétfő - 15:19

    Ú, Cyrex, Isten király vagy!!! Pont ilyet kerestem. 🙂 Köszi szépen! 🙂

    • cyrex
      2013. február 18. hétfő - 17:06

      Van rengeteg változat ebből a neten ami jóval többet tud meg látványosabb is, viszont 10x ekkora terjedelmű a kódja. Azért szeretem ezt, mert egyszerű és lightweight 🙂

  8. Gábor
    2012. október 23. kedd - 00:42

    Üdv!
    Azt hogy tudnám megoldani, hogy ne csak képeket váltson, hanem egy képet és egy divet egyszerre? Elég sokáig próbálkoztam és sokféleképpen variáltam, de sajnos nem akar összejönni

  9. Kundli
    2012. szeptember 10. hétfő - 20:10

    Hol tölthetem le a nyilakat?

  10. maestro
    2012. június 14. csütörtök - 14:15

    Üdv!
    Ugyanaz lenne a problémám mint a legelső kommentelőnek.
    A nyilaim megvannak de nem megy tovább.
    Nem tudom mi lehet a baj :/

  11. Norbeee
    2012. június 9. szombat - 13:37

    Olyant nem lehet amúgy csinálni, hogy ne oldalról ússzanak be a képek, hanem áttűnéssel?

    • SWDsoft
      2012. június 10. vasárnap - 14:52

      De lehet, de viszont ahhoz eléggé át kéne szerkeszteni az egész carousel motorját. Keress rá az animate-ra és azon belül pedig az opacity-n belül nézelődj!

      $(“#div”).animate({opacity: 0.7}, 3000);

  12. emmertarmin
    2012. június 8. péntek - 21:50

    a jquery.js-hez kimásoltam ezt:
    http://cyrex.hu/uploads/2012/05/carousel/js/jquery.js

    És így működik is a kód, bár szaggat kicsit. Viszont enélkül nem fordul el sem magától, sem a nyilakkal.

    Tőled tanultam meg css-t és tanulgatom a jqueryt jó hatásfokkal, de ezt a szituációt valahogy nem értem, hogy mit kellene a jquery.js fáljnak kódként írni. (?)

    • emmertarmin
      2012. június 8. péntek - 22:02

      valószínű azért szaggat, mert nagy képekre állítottam be a 600*300-as méretet, de most a jquery.js, amire hivatkozik a html fájl, az így rendben van?

    • emmertarmin
      2012. június 9. szombat - 14:46

      Közben rájöttem! Még csak most fedezem föl a jQuery-t, bocs hogy rabolom a helyeta kérdésemmel! 😀

  13. White#Angel
    2012. június 1. péntek - 22:45

    Neked csinálnod kéne egy minden az egyben oktató DVD-t és eladnod jó pénzért :DD Lehet hogy még sok mindenki tudja amit te az is hogy többet, de nem sok csinál DVD-t ;D

    • cyrex
      2012. június 2. szombat - 08:39

      Nem hiszek a fizetős oktatóanyagokban. Egyébként állítom neked, hogy a legtöbb fizetős anyag fele annyit nem ér, mint ezek a videók itt az oldalon.

  14. zolee
    2012. május 30. szerda - 12:56

    Hello.Lenne egy kérdésem, hogy nem tudsz-e egy oldalt ajánlani ahol IE-hez fel vannak sorolva a speciális css utasítások.

    • cyrex
      2012. július 10. kedd - 09:32

      Nincsenek ilyenek. Az, hogy a korábbi Internet Explorer verziók nem támogatják a CSS3 szabványokat, már egy másik kérdés, de ezt majd az idő megoldja szép lassan (nagyon nagyon lassan).

  15. Norbeee
    2012. május 28. hétfő - 22:11

    Hali!
    Miért van az, hogy a weboldalamon hiába van UTF-8-as kódolás nincs ékezetes betű? :/
    Ez a sor is bent van a -be :

    • cyrex
      2012. május 29. kedd - 22:03

      ATW-s tárhely? Mert akkor ugyanazért, amiért a másik 30 embernek aki már megkérdezte itt a blogon.

    • Norbeee
      2012. május 30. szerda - 16:45

      Aha atw-s.. :/

    • Gábor
      2012. május 30. szerda - 19:06

      iso-8859-2 kell atw-n az utf-8 helyett

    • Norbeee
      2012. május 31. csütörtök - 21:15

      Köszi a segítséget Gábor. 🙂

  16. NaGyi_22
    2012. május 14. hétfő - 15:07

    Hali!

    Egyszerűen, király vagy 😉

  17. Adorján
    2012. május 9. szerda - 15:48

    Helló! Elősször is: szuperek a videóid Cyrex!!! Már rengeteget letöltöttem és várom a következőket is! 🙂 Kérdésem az lenne, hogy ehhez a forráskódhoz lesz majd valamikor videód? :O

    • cyrex
      2012. május 9. szerda - 18:49

      Ehhez nem fogok videót csinálni, úgyis csak azt mondanám el ami a kódban le van kommentezve 🙂

  18. -isti
    2012. május 9. szerda - 14:25

    Ez nagyon baba… 🙂 Köszi!

  19. hamsa
    2012. május 9. szerda - 14:22

    Hali

    Fain kód. De rég kerestem már egy ehhez hasonló jquery kódot ^^
    Csináltam a weblapom főoldalára egy kis ablakot, amiben pörögnek a képek, mellette meg a hozzá tartozó szöveg. Jó lett, fainúl működik, csak nem tudtam megállítani, hiába kattintottam a pause gombocskámra 😀

    De most adtál egy nagyon jó ötletet. 2 napja találtam ezt az oldalt, de így ilyen jól elmagyarázva, meg ilyen jól kommentelt kódokkal az ember hónapokat spórol ^^

    Persze annak is megvannak az előnyei, hogyha az ember tanulmányoz 10-20 ugyan azt a funkciót ellátó kódot, mindig tanul valami újat az ember, aminek az eredménye egy 21.-ik variáció 😀

    Amúgy ezt suliban tanultad valahol? Vagy te is autodidakta módon tanultad meg, mások source kódját másolva, mint én ? 😀

    • cyrex
      2012. május 9. szerda - 19:02

      Csak megírt és működő kódokból lehet tanulni. Ennek a kódnak az alapját sem én írtam. Találtam egy jó példát és azt alakítottam át a saját igényeim szerint.

      Magamtól tanultam a dolgokat, a suliban a programozást nyomták eszetlenül, Java, Delphi, C++ stb. Ezekből általában jó párszor meg is buktam :mrgreen:

  20. kakablast
    2012. május 8. kedd - 09:47

    Hello az nem tudod miért lehet, hogy minden ugyan úgy van de nem mutatja a nyilakat és a nem mozog a kép. Csak a legelső képet látom.

Hozzászólás

Legújabb hozzászólások