2 Mayıs 2015 Cumartesi

Jquery Slider Otomatik onat ve ileri geri buton

HTML
-----
<html>
<head>
    <meta charset="UTF-8">
    <title>Slider Yapımı</title>
    <link rel="stylesheet" href="stle.css">
</head>
<body>
   

    <div class="slider-dis">

        <div class="slider-resimler">
            <img src="http://www.fillmurray.com/500/400" width="600" height="400" alt="">
            <img src="http://www.fillmurray.com/600/400" width="600" height="400" alt="">
            <img src="http://www.fillmurray.com/700/400" width="600" height="400" alt="">
            <img src="http://www.fillmurray.com/600/400" width="600" height="400" alt="">
            <img src="http://www.fillmurray.com/700/400" width="600" height="400" alt="">
        </div>

    </div>   
    <div class="butonlar">
        <a href="#" class="geri"><</a>
        <a href="#" class="ileri">></a>

    </div>   

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="js.js"></script>
</body>
</html>

JS
---
 $(document).ready(function() {
  
    var uzunluk = $(".slider-resimler img").length;
    var hangiResim = 1;
    var interval;

  
    $(".ileri").click(function() {
        $(".slider-resimler").stop().animate({"margin-left": "-=600px"}, 300);
        hangiResim++;
        if (hangiResim === uzunluk+1) {
            $(".slider-resimler").stop().animate({"margin-left": "0px"}, 300);
            hangiResim = 1;
        }
    });
    $(".geri").click(function() {
        $(".slider-resimler").stop().animate({"margin-left": "+=600px"}, 300);
        hangiResim--;
        if (hangiResim < 1) {
            $(".slider-resimler").stop().animate({"margin-left": "0px"}, 300);
            hangiResim = 1;
        }
    });


/*
    function slideBasla(){
         interval = setInterval(function(){
            $(".slider-resimler").animate({"margin-left": "-=600px"}, 1000,function(){
                hangiResim++;
                if (hangiResim === uzunluk) {
                    $(".slider-resimler").stop().animate({"margin-left": "0px"}, 1500);
                    hangiResim = 1;
                }
            });
        },2000);
    }
    function sliderDur(){
        clearInterval(interval);
    }
    $(".slider-resimler").on("mouseenter",sliderDur).on("mouseleave",slideBasla);
    slideBasla();
*/

});

CSS
---
*{
    margin: 0;
    padding: 0;
}
.slider-dis{
    width: 600px;height: 400px;border: 1px solid red;
    margin: 50px auto;
    overflow: hidden;
}
.slider-resimler{
    display: block;
    width: 5000px;
    height: 400px;
    margin: 0;
    padding: 0;

}
.slider-resimler img{
    float: left;
    width: 600px;
    height: 400px;
}














.butonlar{
    width: 250px;
    height: 80px;
    margin: -50px auto;
}
.butonlar a{
    width: 120px;
    height: 60px;
    background: blue;
    color: magenta;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 59px;
    font-size: 52px;
}

Hiç yorum yok:

Yorum Gönder