Konular

Jquery ile Basit Bir Slider

Jquery kullanarak yapılmış basit bir slider örneği

Jquery ile Basit Bir Slider

Yukardaki gibi butonlara basılınca sola ve saga hareket eden ve eleman bittiğinde tekrar elemanları kendine göre yeinden sıralayabilen böylece devamlı dönebilen bir slider için kullanılan kodlar.

Kodlar:


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
        <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
        <style type="text/css">
            #animasyon { width:430px; height:323px; overflow: hidden; }
            #animasyon ul { width:430px; height:323px; list-style-image:none; list-style-position:outside; list-style-type:none; margin:0  0 0 -430px; padding:0; }
            #animasyon ul li { width:430px; height:323px; float: left; overflow: hidden; }
        </style>
    </head>
    <body>

        <script type="text/javascript">

                       $(document).ready(function() {

                //var Zamanlayici = window.setInterval(YukariKay, 5000);


                var PanelSayisi=$("#animasyon ul > li").size();
                var PanelGenisligi=$("#animasyon ul > li").eq(0).width();

                //Tum slidların boyutuna çekiliyor ul
                $("#animasyon ul").width((PanelSayisi+1)*PanelGenisligi);

                //butona animasyon görevi veriliyor
                $("#yukari").click(function() {
                    YukariKay();
                });

                //asagi butonuna basilirsa
                $("#asagi").click(function() {
                    AsagiKay();
                });

                function YukariKay(){

                    $("#yukari").attr("disabled", true); //butonu kullanıma kapatıyoruz çok basılmasın diye

                    $("#animasyon ul").animate({"margin-left": "-=" + PanelGenisligi + "px"}, { queue: false, duration: 800, complete: function(){ //animasyon tamamlaninca

                        if(parseInt($("#animasyon ul").css('margin-left'))==((PanelSayisi-1)*PanelGenisligi*-1)){ ////Eger eleman biterse

                            $("#animasyon ul li").each(function(ElemanNo){//En bastaki en sona tasiniyor
                                if(ElemanNo<(PanelSayisi-1)){
                                   Tasinacak=$("#animasyon ul li").eq(0).html(); //first child
                                   $("#animasyon ul").append("
  • "
  • +Tasinacak+"");
                                        $("#animasyon ul li").eq(0).remove();
                                    }
                                });

                                //li lerin dizili olduğu ul yi baslangic konumuna aliyoruz
                                $("#animasyon ul").css("margin-left", "0px");
                            }

                            $("#yukari").attr("disabled", false); //butonu kullanıma acıyoruz
                        }});
                    }

                    function AsagiKay(){

                        $("#asagi").attr("disabled", true); //butonu kullanıma kapatıyoruz çok basılmasın diye

                        $("#animasyon ul").animate({"margin-left": "+=" + PanelGenisligi + "px"}, { queue: false, duration: 800, complete: function(){ //animasyon tamamlaninca


                            if(parseInt($("#animasyon ul").css('margin-left'))==0){ //Eger eleman biterse

                                $("#animasyon ul li").each(function(ElemanNo){//En sondaki en başa tasiniyor
                                    if(ElemanNo<(PanelSayisi-1)){
                                       Tasinacak=$("#animasyon ul li").eq(PanelSayisi-1).html(); //last child
                                       $("#animasyon ul").prepend("
  • "
  • +Tasinacak+"");
                                        $("#animasyon ul li").eq((PanelSayisi)).remove();
                                    }
                                });

                                //li lerin dizili olduğu ul yi baslangic konumuna aliyoruz
                                $("#animasyon ul").css("margin-left", "-"+PanelGenisligi*(PanelSayisi-1) + "px");
                            }

                            $("#asagi").attr("disabled", false); //butonu kullanıma acıyoruz

                        }});
                    }
                });
            </script>

            <div id="animasyon">
                <ul>
                    <li><img src="1.jpg" /></li>
                    <li><img src="2.jpg" /></li>
                    <li><img src="3.jpg" /></li>
                    <li><img src="4.jpg" /></li>
                </ul>
            </div>

            <div>
                <input type="button" id="yukari" value="yukari" />
                <input type="button" id="asagi" value="asagi" />
            </div>

            <div id="mesaj"></div>
        </body>
    </html>

Aslında aşağıdaki bi bir düzdende gerçekleşiyor herşey en sonuncu eleman yöne göre başlangıca ve sona taşınıyor fakat biz sadece belirli bir alanı görüyoruz.

Jquery ile Basit Bir Slider

Yorumunuzu Ekleyin

Easy Slider Jquery Plugin

Jquery ile yapılmış mükkemmel sliderlardan birisi Easy Slider

25,817 Okunma Henüz yorum yapılmamış 25/07/2011 22:43:59

Kapsayan Tagı Silmek unwrap()

Bazen SEO için tagları bir başka tag içerisine gömmek zorunda kalırız. Fakat daha sonra bu gömen kod başımıza bela olabilir. JQuery ile bundan unwrap ile kurtulabiliriz.

22,320 Okunma Henüz yorum yapılmamış 10/07/2011 04:55:07

Jquery Tab Menu Örneği

Çok güzel hazırlanmış bir Jquery Tab Menu Uygulaması

22,071 Okunma Henüz yorum yapılmamış 30/07/2011 21:16:35

Jquery İle Resim Boyutlandırma

Bir IMG tagının içinde bulunduğu DIV tağına göre yeniden boyutlandırılması, sayfanın genişliğinin değişmesi sonuçları değiştirecektir.

19,747 Okunma Henüz yorum yapılmamış 10/07/2011 04:24:25

Jquery ile Resim Ortalamak

Bir DIV tagı ile sınırlandırılmış bir alana bir IMG tagını ortalayarak yerleştirmek

16,500 Okunma Henüz yorum yapılmamış 10/07/2011 04:23:28

JQuery Seçicilerini Kullanmak (JQuery Selectors)

Bir HTML nesnesini, bir CSS clasını, bir ID ye sahip elemanı veya bir name'e sahip form nesnesini seçip nasıl JQuery efekti verebiliriz?

16,013 Okunma Henüz yorum yapılmamış 15/01/2014 19:09:39

Yükleniyor...