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/
