Bu Dersimizde Jquery Slider Yapımını Anlatacağız. Çok Basit Olduğundan Zorlanacağınızı Zannetmiyorum. İlk Jquery Dersi Olduğundan Önsözü Kısa Kesiyorum 
Öncelikle standart HTML taglarımızı oluşturuyoruz.
<html>
<head>
</head>
<body>
</body>
</html>
Daha sonra slider div’ini oluşturuyorum CSS ve HTML ksımlarının üzerinde durmayacağım bu makaleyi okuyorsanız onlar bilmeniz gerekir.
<div id=”Slider”>
<ul id=”Resim”>
<li><a href=””><img src=”resimler/resim1.jpg” alt=”” /></a></li>
<li><a href=””><img src=”resimler/resim2.png” alt=”” /></a></li>
<li><a href=””><img src=”resimler/resim3.png” alt=”” /></a></li>
</ul>
</div>Şimdi Slider div’imize biraz şekil verelim<style>
#Slider{width: 500px; height: 200px; margin: 100 auto; }
#Slider ul#Resim{width: 500px; height: 200px;padding:0; margin:0; list−style−type: none;overflow: hidden}
#Slider ul#Resim li{padding:0; margin:0;}
#Slider ul#Resim li img{padding:0; margin:0;width: 500px; height: 200px;}
</style>
Evet CSS stillerinide tanımladıktan sonra esas konumuz olan slider yapımına geçebiliriz.
<script type=”Text/javascript” src=”http://code.jquery.com/jquery-2.0.3.min.js”></script><script type=”Text/Javascript”>
$(document).ready(function(){ // Sayfam hazır olduguna çalışacak fonksiyonu belirtiyorum
var Slider = 0; //Sldier adında bi değişken oluşturup 0 a eşitliyorum
$.Slider = function(toplam){ // fonksiyonumuzu oluşturuyoruz
$(‘#Slider ul#Resim li’).hide(); // ve tüm resimleri gizliyoruz
if(Slider < toplam−1){ // slider değişkeni toplam −1 den büyükse yapılacak işlem 0 a eşitlemiştim zaten
Slider ++; // her çalıştıgında Slider i 1 artırıyoru<
$(‘#Resim li’).hide(); // tüm resimleri gizliyoruz
$(‘#Resim li:eq(‘+Slider+’)’).fadeIn(‘slow’); // ve oluşturdugumuz ve 1 artan değişkene uyan resmi gösteriyoruz
}else{ // else durumu sona geldiğimizde yapılacak ilemi belirtiyor
$(‘#Resim li:eq(‘+Slider+’)’).fadeIn(‘slow’); //
Slider = 0; // değişkenimizi tekrar 0 a eşitliyoruz ki başa dönsün
}}
var ToplamLi = $(‘#Slider #Resim li’).length; //lenght ile reismlerin sayısını alıyoruz
setInterval(‘$.Slider(‘+ToplamLi+’)’,3000); //setınterval ile fonksiyonumzun 3 sn de bir çalışmasını istiyoruz
});
</script>
Kolay Gelsin
Yorum Gönder