Yazar Ol Yazar Girişi
Yazar Girişi
E-Posta Adresi
Şifre
Şifremi Unuttum
Asp.Net .Net MVC PHP & MySQL C# PhotoShop CSS jQuery AlgoritmA MsSQL Server HTML Ruby
- Kategoriler -
Türkçe
English
German
Tüm Kategoriler
jQuery ile Basit Slider Yapımı

Merhaba Arkadaşlar,

jQuery ile basit bir slider yapımını göstereceğim. Öncelikle bir div yapımızı hazırlayalım

<body> tagları arasına

   <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/4.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><img src="resimler/7.jpg" width="620" height="315"/></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>

 

yukarıda resimlerimizin geleceği icerikler id sine sahip bir ul li tagları açtık ardından resimlerin altında sayfalama için tekrar bir ul li tagları açarak sayı sıralamasını yaptık.

yukarıda yaptığımız div taglarını bir stil ile şekillendirelim bunun için css kodu aşağıdaki şekildedir.

* {
    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 */
}

 

sliderimiz şekillenmişken şimdi ona haraket katalım artık sayfamına önce jquery kütüphanesini yüklüyoruz ve ardından biraz javascript kodlarıyla slidermizi tamamlayacağız.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.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>

 

şimdilik basit bir slider yapımını tamamlamış olduk ileriki makalelerde responsive slider yapımını anlatacağım.

bir sonraki makalemizde görüşmek dileğiyle...

Veysel APARI

Sosyal Hesabında Paylaş

7497 görüntüleme

Yorumlar
Adınız Soyadınız
Mail Adresiniz
Doğrulama Kodu

Bildiklerimiz.Net Bildiklerimizi paylaşıyoruz, bilmediklerimizi öğreniyoruz. biz bunları yapıyoruz ya siz...

© 2020 Bildiklerimiz Tüm hakları saklıdır.
bir Bildiklerimiz.Net projesidir.