Merhaba Arkadaşlar,

Bugün jquery ile Slider uygulamasının nasıl yapıldığını anlatacağım.

öncelikle jquery ile slider uygulaması yapabilmek için jquery'de hide(),removeClass(),addClass,fadeIn(),length,setInterval,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;



<script></script>

<script>
$(function(){

var slider=0;
$.slider=function(toplam){
$("#slider ul#buton li").removeClass("aktif");
$("#slider ul#resim li").hide();

if(slider
slider++;

$("#slider ul#buton li:eq("+slider+")").addClass("aktif");

$("#slider ul#resim li:eq("+slider+")").fadeIn("fast");
}else
{
$("#slider ul#buton li:first").addClass("aktif");

$("#slider ul#resim li:first").fadeIn("fast");
slider=0;

}

}
var toplamli=$("#slider ul#resim li").length;
var interval= setInterval('$.slider('+toplamli+')',2000);
$("#slider").hover(function(){
clearInterval(interval);
},function(){

interval= setInterval('$.slider('+toplamli+')',2000);

});
$("#slider ul#buton li:first").addClass("aktif");
$("#slider ul#resim li").hide();
$("#slider ul#resim li:first").show();
$("#slider ul#buton li").click(function(){
var indis= $(this).index();
$("#slider ul#buton li").removeClass("aktif");
$(this).addClass("aktif");
$("#slider ul#resim li").hide();
$("#slider ul#resim li:eq("+indis+")").fadeIn("fast");
slider=indis;
return false

 

}
);
});
</script>


Style dosyalarımız Head içine yazalım








Html Kodlarımızı body içine yazalım;



 





http://bilalisler.net/index.php/jque...-jquey-slider/