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="&lt;script&gt;" title="&lt;script&gt;" />
<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="&lt;script&gt;" title="&lt;script&gt;" />