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