jQuery carousel

2012-05-07

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