jQuery ile basit slider-manşet nasıl yapılır

jQuery ile basit slider-manşet nasıl yapılır

 31.12.2015 19:53:59  jQuery  (0)

Merhaba arkadaşlar,

Bu makalemde sizlere  jquery nin nimetlerinden sadece birini anlatıyor olacağım :) çoğu sitelerde görmüşsünüzdür slide şeklinde galeriler manşetler vs. bunlar nasıl yapılıyor basit bir fadeIn fadeOut il yapılıyor eve lafı fazla uzatmadan slider yapımına başlayalı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.
 
 

 Yorumlar

Yorum Gönder 

 Facebook Profil