Mérei Tamás webdesigner

Tutorial: jQuery carousel

Szerző:   |   2013-03-28

A korábbi változat kicsit átalakítva.

A működés annyiban különbözik, hogy, ha elérjük az utolsó képet akkor nem tölti be utána ez elsőt, hanem visszaugrik az elejére. A múltkori script hibája volt, hogy az időzített animáció nem állt meg amikor az egeret a nyilak fölé mozgattuk, így előfordulhatott olyan eset, hogy ha az animációval egy időben kattintottunk a léptetésre akkor kettőt ugrott. A mostaniban ezt is igyekeztem kiküszöbölni.

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

HTML forráskód


<html>
<head>
	<title>Carousel</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" href="style.css"/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/carousel.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			carousel();
		});
	</script>
</head>
<body>
	<div class="title"></div>
	<div class="wrapper">
		<div class="carousel">
			<div class="images">
				<img src="images/1.jpg" alt=""/>
				<img src="images/2.jpg" alt=""/>
				<img src="images/3.jpg" alt=""/>
				<img src="images/4.jpg" alt=""/>
				<img src="images/5.jpg" alt=""/>
				<img src="images/6.jpg" alt=""/>
				<img src="images/7.jpg" alt=""/>
			</div>
		</div>
		<div class="button previous">‹</div>
		<div class="button next">›</div>
		<div class="shadow"></div>
		<div class="carousel-nav"></div>
	</div>
</body>
</html>

CSS forráskód


* { margin: 0; padding: 0; border: 0 }
body { background: url('images/bg.png') #f4f4f4 }
div.clear { clear: both }
div.title {
	width: 280px;
	height: 60px;
	margin: 30px auto;
	background: url('images/title.png')
}
div.wrapper {
	width: 800px;
	margin: 0 auto
}
div.carousel {
	width: 800px;
	height: 300px;
	overflow: hidden;
	position: relative
}
div.images { position: absolute }
div.images img { float: left }
div.button {
	float: left;
	position: relative;
	top: -155px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	border-radius: 15px;
	background: rgba(0,0,0,0.2);
	color: #fff;
	text-align: center;
	line-height: 24px;
	font-size: 25px;
	font-weight: bold
}
div.button:hover { background: rgba(0,0,0,0.5) }
div.next { left: 787px }
div.previous { left: -50px }
div.carousel-nav {
	margin: 0 auto;
	height: 10px;
	padding: 5px 0
}
div.carousel-nav ul { margin: 0 auto }
div.carousel-nav li {
	list-style: none;
	width: 10px;
	height: 10px;
	float: left;
	margin: 0 10px 0 0;
	border-radius: 5px;
	background: #7f8387;
	background: -webkit-radial-gradient(center, ellipse cover,  #7f8387 0%,#28343b 100%);
	background: radial-gradient(ellipse at center,  #7f8387 0%,#28343b 100%)
}
div.carousel-nav li.active {
	background: #a4b357;
	background: -webkit-radial-gradient(center, ellipse cover,  #a4b357 0%,#75890c 100%);
	background: radial-gradient(ellipse at center,  #a4b357 0%,#75890c 100%)
}
div.carousel-nav li:last-child { margin: 0 }
div.shadow {
	width: 800px;
	height: 15px;
	background: url('images/shadow.png')
}

jQuery forráskód


function carousel() {

	// sebesség
	var speed = 3000;

	// időzítő
	var timer = setInterval("rotate()", speed);

	// képek száma
	var images_number = $(".images img").size();

	// carousel teljes szélessége
	var carousel_width = $(".carousel").width() * images_number;

	// a képeket tartalmazó DIV szélessége megegyezik a carousel teljes szélességével
	$("div.images").css({"width": carousel_width});

	// pöttyöket tartalmazó UL hozzáadása
	$(".carousel-nav").append("<ul>");

	/* Mivel egy pötty szélessége 10px és a margin is 10px,
	   ezért 20-al szorozzuk a képek számát.
	   Az utolsónál nincs margin, ezért 10-et ki kell belőle vonni.
	*/
	$(".carousel-nav ul").css({"width":images_number*20-10});

	// annyi LI-t adunk hozzá, ahány képünk van
	for(var i=0; i < images_number; i++){
		$(".carousel-nav ul").append("<li>");
	}

	// az első képre rátesszük az active class-t
	$(".images img:first").addClass("active");

	// az első pöttyre rátesszük az active class-t
	$(".carousel-nav li:first").addClass("active");

	// következő gombra történő kattintás
	$(".next").click(function(){

		// aktív képet léptetjük eggyel
		$active_image = $(".images img.active").next();

		// aktív pöttyöt léptetjük eggyel
		$active_nav = $('.carousel-nav li.active').next();

		// ha nincs több kép akkor visszaugrunk az elsőre
		if ($active_image.length==0){
			$active_image = $(".images img:first");
			$active_nav = $(".carousel-nav li:first");
		}

		// léptetést végrehajtó függvény hívása
		step();
	});


	// előző gombra történő kattintás
	$(".previous").click(function(){

		// aktív képet léptetjük eggyel vissza
		$active_image = $(".images img.active").prev();

		// aktív pöttyöt léptetjük eggyel vissza
		$active_nav = $(".carousel-nav li.active").prev();

		// ha nincs több kép akkor visszaugrunk az utolsóra
		if ($active_image.length==0){
			$active_image = $(".images img:last");
			$active_nav = $(".carousel-nav li:last");
		}

		// léptetést végrehajtó függvény hívása
		step();
	});

	// ha az egeret a kép vagy a gombok fölé mozgatjuk, megállítjuk az automatikus léptetést
	$(".carousel, .previous, .next").hover(
		// a clearInterval() metódus törli a setInterval() által beállított időzítőt
		function() { clearInterval(timer); },

		// a setInterval() metódussal meghívjuk a rotate() függvényt a speed változóban meghatározott időközönként
		function() { timer = setInterval("rotate()", speed); }
	);
}

// léptetést végrehajtó függvény
function step() {

	// össze képről leszedjük az active class-t
	$(".images img").removeClass("active");

	// összes pöttyről leszedjük az active class-t
	$(".carousel-nav li").removeClass("active");

	// aktív képre rátesszük az active class-t
	$active_image.addClass("active");

	// aktív pöttyre rátesszük az active class-t
	$active_nav.addClass("active");

	/* Meghatározzuk az eltolás mértékét amit úgy kapunk meg,
	   hogy az akutális kép indexét beszorozzuk a kép méretével.
	   Jelen esetben 800px egy kép szélessége, ezért az eltolás
	   mértéke így fog alakulni: 0, 800, 1600, 2400, 3200...
	*/
	var imagesposition = $active_image.index() * $(".images img").width();

	// images DIV-et eltoljuk az imageposition változóban meghatározott értékkel
	$(".images:not(:animated)").animate({"left": -imagesposition}, 500);
}

// automatikus léptetést végző függvény
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!

41 hozzászólás

  1. Heki
    2016. november 11. péntek - 14:34

    egész nap próbálgattam ezt a képnézegetőt, meg a korábbi verziót, sőt még a képgaléria verziódat is, de egyszerűen semelyik nem akar működni… valószínűleg én megyek el valami mellett, de rá nem jövök mi az… egy kis segítség jól jönne.

    • cyrex
      2016. december 19. hétfő - 09:14

      Ott a komplett forráskód és egy működő demo. Ennél többet hogyan tudnék segíteni?

  2. guriga
    2015. június 28. vasárnap - 13:12

    Szia!

    Esetleg tudnál olyan képnézegető megoldást ami jó lehet egy Responziv weblapra pl:mint a referenciád oldalon található

    • cyrex
      2015. július 17. péntek - 15:40

      Az egy plugin, Tiny Carousel a neve.

  3. guriga
    2015. június 27. szombat - 08:50

    Szia! Tamás

    Nagy sokat segítettek a videóid és sok új dolgot tanultam de még nem eleget. Esetleg lehetne szó egy olyan képnézegető elkészítéséről ami Responziv weboldalra is megállja a helyét. Pl. a te referenciáid vagy valami hasonló.

    Üdv! guriga

    • cyrex
      2015. augusztus 17. hétfő - 08:59

      Az egy jQuery plugin, Tiny Carousel a neve.

  4. LoremDonor
    2015. február 8. vasárnap - 17:44

    Egy kérdés! Te melyik cégtől hosztoltatod a domainedet? És az tárhylyel együtt mennyibe kerül és mennyi idöközönként kell fizetni?

    • cyrex
      2015. február 8. vasárnap - 19:21

      webdigital.hu medium csomag

  5. mikiR2
    2015. február 4. szerda - 08:33

    Szia Tamás, azt szeretném megkérdezni, hogy mit kell a kódon módosítani ahhoz hogy a képek körbemenjenek.
    Én a linkeset használnám amit a hozzászólásoknál belinkeltél.

    Üdv: mikiR2

    • cyrex
      2015. február 8. vasárnap - 15:27

      Van az oldalon másik carousel tutorial is, az körbemegy.

    • mikiR2
      2015. február 8. vasárnap - 17:51

      Igen tudom, de nekem az nem jó mert a szöveg rész nem kell és a képek nem linkeltek.

    • cyrex
      2015. február 8. vasárnap - 19:29

      Hát szedd le róla a szöveget, és tegyél linket a képekre 🙂

  6. Steven
    2014. július 4. péntek - 20:56

    Helló nekem problémám adódott a linkeléssel sajnos ha <a href=”” rel=”nofollow”> teszek az egyik képre akkor megáll az egész nem váltja a képeket !

    Esetleg valami megoldást tudnál nekem mondani ?

    Üdv: Steven

    • cyrex
      2014. július 6. vasárnap - 09:15

      Nem fog működni, át kell hozzá írni a JS-t is.

    • Steven
      2014. július 9. szerda - 20:39

      esetleg nem tudnád leírni azt a részt mert nem tudom sajnos …. megköszönném !!!

    • cyrex
      2014. július 21. hétfő - 21:53
  7. beni
    2014. június 25. szerda - 13:51

    A jQuery forrás kodot milyen nyelvben irtad? mert nemtudom mijen nyelven irjam?

    • cyrex
      2014. június 29. vasárnap - 18:58

      JavaScript. A jQuery csak egy keretrendszer.

  8. Kenta
    2014. május 24. szombat - 21:14

    Szia cyrex!

    Nem tudnál egy video tutorialt felrakni emellé?

    • cyrex
      2014. május 28. szerda - 22:27

      Miért kell hozzá videó? Ott van minden kommentezve a forrásban 🙂

  9. robi
    2013. december 27. péntek - 15:43

    Köszi a forráskódodat!

    Én egy picit tovább fejlesztettem, így az LIk-re kattintva egyből az annak megfelelő képre lép.

  10. Gyuri
    2013. december 2. hétfő - 10:53

    Valamint még egy olyan kérdésem lenne, hogy jquery-be lehet-e olyat, hogy megjegyzi a felhasználó által kívánt állapotot?
    Vaterának (az újnak) van olyan menüsora, hogy el tudom tüntetni, ha rákattintok egy gombra. Ha rákattintok egy linkre, a menüsor “megjegyzi” a felhasználó által választott állapotot, tehát hogy eltüntettem.
    Bocs, hogy ide, sajnos nem találtam olyan oldalt, ahova ezt írhatnám:)

    • cyrex
      2013. december 15. vasárnap - 16:52

      Feltehetően sütikben tárolják el a menü állapotát. jQuery-vel is lehet sütiket kezelni.

  11. Gyuri
    2013. december 2. hétfő - 10:48

    Üdv!
    Sok videódat megnéztem már, sokat segítettél a jövőbeli honlapom felépítésében:)
    Most a fentebb leírt képanimációt próbáltam beilleszteni a honlapba, sajnos csak félig sikeresen.
    A honlapomon fent van egy fix menüsor (position: fixed;). Ha bemásolom a kódot a honlapba, működik, de valamiért “fentebbnek” értékeli az animációt, mint a menüsort. Tehát görgetés hatására elfedi a menüt.
    Az animáció gombja is ezt csinálta, ott átállítottam a positon: static;-ra és úgy már “mögé csúszik”. De a képnél nem tudom ezt megtenni, mert akkor már nincs animáció. A pötty megy, az időzítő megy, de a kép nem vált.
    Tudnál segíteni?:)

    Köszönöm,
    gy.

    • cyrex
      2013. december 13. péntek - 15:55

      z-index-el próbáltál játszani? A carousel-nek alacsonyabb z-index értéket kellene megadni, mint a fix menüdnek, lehet, hogy csak ennyi a baja.

  12. naturalstyle
    2013. november 11. hétfő - 01:05

    Sziasztok,

    Olyan kérdésem lenne, hogy már ugye valaki előtte szóló írta hogy rákattintós képeket( a taggel ) hogyan lehet csinálni, és arra kapott egy választ, és ehhez kapcsolódóan valaki leírná hogy akkor hogyan kell megoldani? mert hiába látom a megoldást, nem tudom megcsinálni jelenlegi tudásommal. köszönöm 🙂

  13. Laci
    2013. szeptember 18. szerda - 22:39

    Azt vettem észre, hogy folyó animáció közben a következő/előző gombra kattintva illetve időzített animációnál az animáció hosszánál rövidebbre állított gyakoriság mellett a pötty el tud mászni a helyéről.
    Megoldás lehet erre a következő/előző eseményt kezelő függvényekbe betett fut-e animáció ellenőrzés if ($(“.images:animated”).length == 0) hogy csak akkor léptesse a pöttyöt ha éppen nincs folyamatban animáció.

    • cyrex
      2013. szeptember 29. vasárnap - 23:55

      Van benne valami, mert, ha nagyon gyorsan kattintgatom valamelyik irányba a léptetést, akkor is el tud csúszni a pötty. A tesztelés során nem tűnt fel 🙂

  14. laszlosomai
    2013. szeptember 8. vasárnap - 14:44

    Szervusz Tamás, azt szeretném megkérdezni, hogy az alábbi oldalon levő jQuery függvényben miért szükséges az a két darab .stop() függvény az animálások előtt?
    http://css-tricks.com/jquery-magicline-navigation/

    • cyrex
      2013. szeptember 9. hétfő - 20:27

      Hogy megállítsa a folyamatban lévő animációt, ha van ilyen. Próbáld ki, hogy kiszeded és utána húzgáld gyorsan az egeret a menüpontok felett. Addig nem kezdi el az aktuális menüpont animációját amíg az előző véget nem ért.

    • laszlosomai
      2013. szeptember 11. szerda - 12:03

      Köszi a segítséget. Kipróbáltam. 😀

  15. plecsi
    2013. szeptember 3. kedd - 20:11

    Szia!

    Nagyon jó ez a tutor!
    Responsiveként mennyit sort kellene átalakítani? Ha pl. a képek teljes szélességben vannak… előre is köszi!

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

      Ezt a változatot nem olyan egyszerű reszponzívra megcsinálni. Használj inkább valami kész plugint, “responsive jquery carousel” kulcsszóra keresve.

  16. Zsolti
    2013. augusztus 7. szerda - 11:34

    “a” tag közé tenni

  17. Zsolti
    2013. augusztus 7. szerda - 11:31

    Nagyon tetszik ez a forráskód, de tudnál abban segíteni, hogy hogyan tudom a képeket kattinthatóvá tenni. Már próbáltam a képeket a tag közé tenni, de akkor nem működik a léptetés. Ha pl. csak a harmadik képet linkelem, akkor a harmadik kép után visszaugrik az elsőre. Erre a problémára tudsz valamilyen megoldást ajánlani? Köszi

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

      Az nem lesz jó, mert nem így működik. Módosítani kellene úgy, hogy DIV-ekbe pakolni az egyes képeket és akkor azon belül már lehetne linkelni. Vagy mehet simán block típusú A tagek közé is ahogy próbáltad, csak akkor a JS-t kell hozzá igazítani.

  18. White#Angel
    2013. június 13. csütörtök - 12:26

    Ezt érdemes lenne megcsinálnod 😀 Nekem bejött, és használtam is.
    http://www.webdesignerdepot.com/2012/12/how-to-make-an-animated-thumbnail/

  19. Pári Balázs Béla
    2013. május 11. szombat - 08:15

    Nagyon jó lett, pont erre van most szükségem. 🙂 Köszi

  20. feco132
    2013. március 28. csütörtök - 21:49

    Már nagyon vártam az új tutoriált, minden nap akár 4-5 alkalommal is felnéztem az oldalra, habár már kaptunk carousel készítéshez, de köszönöm a munkádat és fáradtságodat! Kérdezni szeretném, mikorra várható a következő? 😀

    Üdv Fecó!

  21. SWDsoft
    2013. március 28. csütörtök - 16:46

    HOPPÁ! 😀

    • White#Angel
      2013. március 31. vasárnap - 20:40

      A weboldaladra lehetséges még moderátort kapni?

Hozzászólás

Legújabb hozzászólások