Konular
Videolar
Sunular
Testler

JQuery İle Basit Slider Yapımı

Kendi Kendinize

 Slider'e ait CSS kodları: stil.css

* {
    font: 10px/10px trebuchet, verdana
}
#IcerikNolar, #Icerikler { list-style: none; clear: both; }
#IcerikNolar li{
    width: 15px;
    height: 15px;
    background-color: crimson;
    color: #ffffff;
    margin: 2px;
    padding: 2px;
    float: left;
}

#Icerikler li {
    width: 620px;
    height: 315px;
    background-color: crimson;
    float: left;
    overflow: hidden;
    display: none; /*ilk basta gosterme */
}

  HTML ve JQuery Kodları:

 <link type="text/css" rel="stylesheet" href="stil.css" />
        <script type="text/javascript" src="jquery-1.10.2.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#Icerikler li:first").show();
               
                $("#IcerikNolar li").mouseover(function(){
                   
                   Tiklanan=$(this).index();
                   
                   $("#Icerikler li").hide();
                   //$("#Icerikler li").eq(Tiklanan).css("display", "block");
                   $("#Icerikler li").eq(Tiklanan).fadeIn("slow");
                });
            });
        </script>
    </head>
    <body>

        <ul id="Icerikler">
            <li><img src="resimler/1.jpg" width="620" height="315"/></li>
            <li><img src="resimler/2.jpg" width="620" height="315"/></li>
            <li><img src="resimler/3.jpg" width="620" height="315"/></li>
            <li><img src="resimler/5.jpg" width="620" height="315"/></li>
            <li><img src="resimler/6.jpg" width="620" height="315"/></li>
            <li>F</li>
            <li>G</li>
        </ul>
       
        <ul id="IcerikNolar">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>

  Sonuç:

JQuery İle Basit Slider Yapımı

26,330 Okunma Henüz yorum yapılmamış 15/01/2014 21:33:12 15/01/2014 21:35:27

Yorumunuzu Ekleyin

Easy Slider Jquery Plugin

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

25,680 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,212 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ı

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

Jquery ile Basit Bir Slider

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

20,446 Okunma Henüz yorum yapılmamış 25/07/2011 22:20:05

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,635 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,377 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?

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

Yükleniyor...