jquery ile Slider uygulamasının nasıl yapılır?
öncelikle jquery ile slider uygulaması yapabilmek için jquery’de hide(),removeClass(),addClass,fadeIn(),length,setI nterval,hover()
gibi fonksiyonların ne işe yaradıklarını anlatarak başlayalım.
jquery slider yapımı
Hide() = seçili nesnenin gizlenmesini sağlar,
removeClass()=seçilen nesneden parantezler arasına yazılan class özelliklerinin silinmesini sağlar,
addClass()=remove classın tersi bir işlem yapar yani seçilen nesneye parantezler arasında yazdıgımız class isminin özelliklerini verir,
fadeIn()=hide fonksiyonunun gizlediği nesneyi tekrar görünür hale getirmeyi sağlar aynı zamanda show() fonksiyonuda kullanılabilir aralarındaki fark, efekt farkı,
length=seçilen nesnenin uzunluğunu belirler
örnek:
- 1.li
- 2.li
- 3.li
burada jquery length işlevini ul için kullanalım.
var li_sayisi=$(“ul li”).length();
dediğimizde li_sayisi değişkeninde 3 değerini görürüz.
setInterval()= belirttiğimiz işlemi belirli zaman aralıklarında yapmayı sağlar. biz bu özelliği sliderde geçişler için kullanacağız yani her 5 saniyede bir resimlerin değişmesini sağlayacağız.
hover()=bu fonksiyon ise üzerine gelince yapılacak işlemler dizisini belirtir.(üzerine gelince ve üzerinden gidince)
jQuery Slider Uygulaması DEMO
Gelelim Şimdi html ve jQuery Kodlarımızı Yazmaya;
jQuery Kodlarımız Head Bölümüne yazalım;
PHP- Kodu:
Untitled Document <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fcode.jquery.com%2Fjquery-1.9.1.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%2F%2F%20%3C!%5BCDATA%5B%0A%3Cbr%20%2F%3E%0A%24(function()%7B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3Evar%20slider%3D0%3B%3Cbr%20%2F%3E%0A%24.slider%3Dfunction(toplam)%7B%3Cbr%20%2F%3E%0A%24(%22%23slider%20ul%23buton%20li%22).removeClass(%22aktif%22)%3B%3Cbr%20%2F%3E%0A%24(%22%23slider%20ul%23resim%20li%22).hide()%3B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3Eif(slider%3Ctoplam-1)%7B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3Eslider%2B%2B%3B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3E%24(%22%23slider%20ul%23buton%20li%3Aeq(%22%2Bslider%2B%22)%22).addClass(%22aktif%22)%3B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3E%24(%22%23slider%20ul%23resim%20li%3Aeq(%22%2Bslider%2B%22)%22).fadeIn(%22fast%22)%3B%3Cbr%20%2F%3E%0A%7Delse%3Cbr%20%2F%3E%0A%7B%3Cbr%20%2F%3E%0A%24(%22%23slider%20ul%23buton%20li%3Afirst%22).addClass(%22aktif%22)%3B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3E%24(%22%23slider%20ul%23resim%20li%3Afirst%22).fadeIn(%22fast%22)%3B%3Cbr%20%2F%3E%0Aslider%3D0%3B%20%3C%2Fp%3E%0A%3Cp%3E%0A%0A%3Cp%3E%7D%20%3C%2Fp%3E%0A%3Cp%3E%0A%2F%2F%20%5D%5D%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />