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