jQuery carousel

2013-03-28

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