JQUERY ILE BASIT BIR SLIDER NASIL YAPILIR


Merhaba arkadaşlar bu makalede jquery ile basit bir fadeIn fadeOut slider yapımını anlatacağım.

1)  Html Yapısı

<div class=”slideWrapper”>

                    <img src=”/examples/images/space1.jpg” />
                    <img src=”/examples/images/space2.jpg” />
                    <img src=”/examples/images/space3.jpg” />
 </div>

2) Css Yapısı

<style>

  .slideWrapper {
            position: relative; //içinde bulunan resimlerin pozisyonlarını bu div’den alması için position:relative yapıyoruz.
            width: 600px;
            height: 400px;
            margin: 0 auto;
        }
  .slideWrapper img { //İçerideki resimleri serbest moda geçirip bulunduğu div’in sol üst köşesine alıp gizliyoruz.
            position: absolute;
            top: 0;
            left: 0;
            display: none;
         }
   .slideWrapper img:nth-child(1) { //nth-child ile resimlerden ilkini görünür yapıyoruz.
<                    display: block;
          }
</style>
<
3) jQuery Yapısı
  <script>
        var allImages;
        var imgCount;
        var current = 0;
        $(document).ready(function ($) {
            allImages = $(“.slideWrapper img”);   1)
            imgCount = allImages.length; 2)
            setInterval(slide, 2500);  5)
        });
        function slide() {
            if (current == (imgCount – 1)) { 3)
                allImages.fadeOut(600).eq(0).fadeIn(600);
                current = 0;
            }
            else { 4)
                current++;
                allImages.fadeOut(600).eq(current).fadeIn(600);
            }
        }
    </script>

Adımlar:

1) Kavrayıcı altındaki tüm resimleri bir değişkene atıyoruz.
2) Resimlerin sayısını alıyoruz. (Veri tabanından gelmiyorsa resimler elle bu sayıyı verebilirsiniz.)
3) Eğer aktif resim index'i toplam resim sayısının 1 eksiğine eşit ise ilk resmi görünür yapıyoruz.
4) Üstteki koşula uymuyorsa aktif resim indexi'ni bir arttırp o index'teki resmi görünür yapıyoruz.
5) slide methodunu 2,5 saniyede bir çalıştırıyoruz.
İyi Kodlar!
kaynak : http://www.kodstrap.com/makale/jquery-ile-basit-bir-slider-nasil-yapilir
Share Button

Comments 0

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

* Copy This Password *

* Type Or Paste Password Here *

2.541 Spam Comments Blocked so far by Spam Free Wordpress

More From: Asp.NET

DON'T MISS