LZ3G – Webmaster Blog! php, Mysql, JQuery, Java, Wordpress

jquery ile Slider uygulamasının nasıl yapılır?

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:

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;" />