lostyazilim
tr.link

jQuery Slider Yapımı ( Detaylı anlatım Tüm Kullanılan Fonksiyonlarla )

2 Mesajlar 1.068 Okunma
lstbozum
tr.link

mercanshark mercanshark WM Aracı Kullanıcı
  • Üyelik 02.07.2014
  • Yaş/Cinsiyet 30 / E
  • Meslek web yazılım
  • Konum İstanbul Anadolu
  • Ad Soyad B** İ**
  • Mesajlar 37
  • Beğeniler 0 / 3
  • Ticaret 0, (%0)
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/
fubia

kişi bu mesajı beğendi.

www.bilalisler.net
Teknoloji,yazılım paylaşım bloğum
wmaraci
reklam

fubia fubia Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 17.05.2014
  • Yaş/Cinsiyet 35 / E
  • Meslek Webmaster
  • Konum İzmir
  • Ad Soyad K** Ç**
  • Mesajlar 209
  • Beğeniler 15 / 56
  • Ticaret 4, (%100)
Teşekkürler güzel anlatım olmuş.
 

 

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al