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