// SLAYT BÖLÜMÜ

$(document).ready(function () {

    var aktif = 1; var sayac; var SayfaNo = "";
    var adet = $("#resimler img").length;                               // Tüm resimlerin sayısını adet değişkenine aktarıyoruz.

    $("#resimler img:first").fadeIn(2000);                              // İlk resmi gösteriyoruz.

    for (var i = 1; i <= adet; i++)                                    // Tıklama onayı onclick ile veriliyor.
    {
        SayfaNo += "<span class = 'SayfaNo' onclick='Tikla(" + i + ")'>" + i + "</span>";
    }

    $("#Sayfalar").html(SayfaNo);                                       // SayfaNo değişkenini Sayfalar div'ine basıyoruz.

    renklendir(1);                                                      // İlk resim için sayfa numarasını renklendiriyoruz.
    sayac = setInterval(slayt, 2000);                                   // Bir sonraki resme geçmesi için slayt fonksiyonuna geçiyoruz.


    function slayt() {
        $("#resimler img:nth-child(" + aktif + ")").hide()              // aktif nolu resim dışındaki resimleri seç ve gizle.

        aktif = (aktif + 1) % adet;                                     // Bir sonraki resim sayısına geç.
        if ((aktif % adet) == 0) {                                      // Son resim ise başa dön.
            aktif = adet;
        }
        $("#resimler img:nth-child(" + aktif + ")").fadeIn(2000);        // Sırası gelen resmi göster.
        renklendir(aktif);                                              // Sırası gelen resmin sayfa numarasını renklendir.
    }

    function Tikla(deger) {
        var deger = $("div").has("span");                               // İçerisinde span olan div'leri seçer ve deger değişkenine aktarır.
        renklendir(deger);                                              // Tıklanan sayfanın sayfa numarasını renklendir.

        $("#resimler img:nth-child(" + aktif + ")").hide();             // Gösterilen resmi gizle.
        aktif = deger;                                                  // Tıklanan resmin değeri aktif'e aktar.
        $("#resimler img:nth-child(" + aktif + ")").fideIn(2000);       // Tıklanan resmi göster.
        clearInterval(sayac);                                           // Sayacı sıfırla.
        sayac = setInterval(slayt, 2000);                               // Slayt fonksiyonuna atla.
    }


    function renklendir(deger) {
        $("#Sayfalar span")
        .css("background-color", "#09C")                                // Zemin rengini mavi yap.
        .not(":nth-child(" + deger + ")")                               // Aktif resim dışındakileri seç.
        .css("background-color", "#000");                               // Zemin renklerini siyah yap.
    }

})