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