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();
}

44 hozzászólás

  1. 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!

    • 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. 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!

    • 2013. szeptember 4. szerda - 17:07

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

  3. 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? 🙂

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

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

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

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

  4. 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!

    • 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.

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

      Köszönöm Cyrex!

    • 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. 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 🙂

    • 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. 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!

    • 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. 2013. február 18. hétfő - 15:19

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

    • 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. 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. 2012. szeptember 10. hétfő - 20:10

    Hol tölthetem le a nyilakat?

  10. 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. 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?

    • 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. 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. (?)

    • 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?

    • 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. 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

    • 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. 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.

    • 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. 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 :

    • 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.

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

      Aha atw-s.. :/

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

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

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

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

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

    Hali!

    Egyszerűen, király vagy 😉

  17. 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

    • 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. 2012. május 9. szerda - 14:25

    Ez nagyon baba… 🙂 Köszi!

  19. 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 ? 😀

    • 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. 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.

    • 2012. május 27. vasárnap - 22:17

      Letöltötted a nyilakat, vagy rajzoltál sajátot? A pics könyvtárban keresi a képeket.

    • 2012. július 7. szombat - 15:18

      Le kell tölteni a nyilakat.
      A kép valószínűleg azért nem mozog, mert hiányzik a jquery.js fájl.
      http://cyrex.hu/uploads/2012/05/carousel/js/jquery.js

Hozzászólás

Keresés a blogon
Kategóriák
Legújabb hozzászólások
  • Bootstrap carousel

    Gondolom azóta biztos megoldottad, de azért belinkelem ide a legújabb verzióját a carousel-nek: https://getbootstrap.com/docs/4.1/components/carousel/...

  • HTML5 + CSS3 menü

    Az itt sajnos nem fog megjelenni, mert eszképeli amikor elposztolod a kommentet :(...

  • Responsive menü

    Ez a menü bot egyszerű, nem figyel ablak átméretezést és hasonlókat. Ha nincs benne tapasztalatod és nem akarsz vele szórakozni, akkor legegyszerűbb e...

  • Scrollbar színezgetés CSS-sel

    Érdekes felvetés, sosem foglalkoztam ezzel. Most ahogy megnéztem pár weboldalt teljesen véletlenszerűnek tűnik, hogy mikor tűnik el az address bar és ...

  • Bootstrap carousel

    Ha a legújabb Bootstrap-et használod és xs méretben el akarod tüntetni, akkor ez kell: .d-none .d-sm-block...

  • A flexbox model

    Lesz. Folyamatban van....

  • Scrollbar színezgetés CSS-sel

    Meglesni, megtanulni, továbbadni. Ez a helyes sorrend :)...

  • A villanyszerelés örömei panelben

    A legjobb, hogy múltkor akartam venni egy B10-est kismegszakítót. Megkérdezték a boltban, hogy mekkora a főmegszakítóm. Mondom 16-os. Erre rám akarták...

  • A villanyszerelés örömei panelben

    Örülök, hogy nem C16 Amperes az összes kismegszakító, sajnos ez manapság " divat " ! A világításra bőven elég a B6 Amperes kismegszakító, főleg azért ...

  • Scrollbar színezgetés CSS-sel

    Hali. Már régebb óta követlek, és rengeteget tanultam a videóidból, a szakmai tudásom alapjait, és még az alapokon túli tudásom jelentős részét is től...

  • HTML + CSS űrlap

    Hali, programozáshoz nem értek, de most a kliensoldali templétezés a divat. Vue JS, Angular, stb....

  • HTML + CSS űrlap

    Szia Tamás! Nagyon sokat segítettek a videóid. Köszönöm! Nem tudtam eldönteni melyik blogba írjak, ezt választottam. Azt szeretném kérdez...