03:55
a
İlk olarak index.html adında bir sayfa oluşturuyoruz
jquery kütüphanemizi dahil ediyoruz
Daha sonra Css imizi düzenliyoruz
En son olarak jquery kodlarımızı slider.js oluşturup içine yazıyoruz ve includes/slider.js olacak
jquery kütüphanemizi dahil ediyoruz
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery slider | Web Öğrencisi </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="includes/slider.js"></script>
</head>
<body>
<div id="featured-slider"> <!-- jQuery slider/Manşet haber sistemimizin konumlandırmasını sağlayacak olan element -->
<div id="slider"> <!-- Bu element sayesinde sola sağa kayma işlemlerini yapacağız. -->
<div> <!-- Birinci slayt/sayfa için başlangıç -->
<img src="images/bir.jpg" /> <!-- Slayt/sayfada çıkmasını istediğiniz resim/fotoğraf -->
<h2>Birinci sayfa için başlık</h2> <!-- Gösterilecek olan yazının başlığı -->
</div> <!-- Birinci slayt/sayfa için bitiş -->
<div>
<img src="images/iki.jpg" />
<h2>İkinci sayfa için başlık</h2>
</div>
<div>
<img src="images/uc.jpg" />
<h2>Üçüncü sayfa için başlık</h2>
</div>
<div>
<img src="images/dort.jpg" />
<h2>Dördüncü sayfa için başlık</h2>
</div>
<div>
<img src="images/bes.jpg" />
<h2>Beşinci sayfa için başlık</h2>
</div>
</div>
<div id="sayfalama"> <!-- Slayt/sayfalar arası geçişi elle sağlamak için gerekli sayfalama kısmının başlangıçı -->
<a href="#"><span>bir</span></a> <!-- Birinci sayfa/slayta geçiş için gerekli link ve altta sırayla devam etmekte -->
<a href="#"><span>iki</span></a>
<a href="#"><span>uc</span></a>
<a href="#"><span>dort</span></a>
<a href="#"><span>bes</span></a>
</div>
</div>
</body>
</html>Daha sonra Css imizi düzenliyoruz
*{margin:0px;padding:0px;} /* en basitinden css 'imizi sıfırlıyoruz. */
#featured-slider{width:500px;height:200px;overflow:hidden;position:relative;} /* Bütün sayfaların gözükmemesi için overflow:hidden; kullandık. */#slider{width:2500px;height:200px;position:absolute;top:0px;left:0px;} /* #slider elementinde bütün sayfalarımızı/slaytlarımız bulunduğu için genişliğini 2500px belirledik ve kaydırma işlemini bu element ile yaptığımız için position:absolute; tanımladık. */
#slider div{width:500px;height:200px;float:left;position:relative;} /* #slider 'ı her seferinde sola kaydırdığımız için içindeki divlerin yanyana gözükmesi gerek. Bu yüzden float:left; tanımladık */
h2{background:url(images/titlebg.png);width:406px;height:27px;padding-top:3px;text-align:center;position:absolute;left:10px;top:10px;font:18px 'Trebuchet MS';color:#fff;}
#sayfalama{position:absolute;left:10px;bottom:10px;}
#sayfalama a{background:url(images/link.png);width:16px;height:16px;margin-right:2px;display:block;float:left;text-decoration:none;}
#sayfalama a span{display:none;} /* Slider 'ın sol alt köşesindeki sayfa linklerininEn son olarak jquery kodlarımızı slider.js oluşturup içine yazıyoruz ve includes/slider.js olacak
$(document).ready( function() { // Sayfamız hazır olduğu zaman aşağıdaki kodların uygulanacağını söylüyoruz.
var i = 0; // Hangi sayfada/slaytta [0, 1, 2, 3, 4] olduğumuzu atayacağımız değişken.
var tumgenislik = 0; // Bu değişkende kaçıncı sayfada/slaytta ise o ve ondan önceki slaytların genişliklerinin toplamı yer alacak. Başlangıç değeri olarak 0 atıyoruz.
var genislik = $('#slider div').width(); // Ola ki slider 'ın genişliğini değiştirmek istersek hem css hem .js dosyamızda değişiklik yapmamak için '#slider div' etiketinin genişliğini bu değişkene atıyoruz.
function animasyon(px){ // Slider 'ımızın geçiş animasyonu için animasyon adında fonksiyon oluşturuyoruz.
$('#slider').stop(false, false).animate({ // #slider 'a animasyon tanımlıyoruz. Slider 'da gördüğümüz sayfaların hepsi #slider 'ın içinde bulunmakta.
left: -px // Fonksiyona girilen px değişkeni kadar sola kaymasını sağlıyoruz.
}, 300); // Buradaki değer animasyonun gerçekleşeceği milisaniyeyi belirtiyor.
}
$('#sayfalama a').click(function(){ // #slider 'ın sol alt köşesinde belirlediğimiz 5 adet linke tıklanınca yapılacak işlem için fonksiyon oluşturuyoruz.
var index = $(this).index(); // Linke tıklanınca kaçıncı link olduğunu index() ile alıyoruz. İlk link 1 değil 0 değerini vermektedir.
pozisyon = index * genislik; // #slider 'ımızı ne kadar sola kaydıracağımızı belirten değişken. Örneğin ikinci linke tıklayınca 1*500 değerini alacaktır.
animasyon(pozisyon); // Bir önceki satırda belirlediğimiz pozisyon değişkeni kadar #slider 'ımızın sola gitmesi için gerekli fonksiyonu çalıştırıyoruz.
if(index == 4){ // #sliderımız son sayfaya/slayta geldiğinde sayfalarımız bitmiş olacağı için #slider 'ı en başa götürmemize yarıyan şart cümleciği.
i = 0; // Şart cümlediğimiz true dönerse i değişkenine 0 değerini atayıp #slider 'ımızı en başa götürüyoruz.
}else{
i = index + 1; // Şart cümleciğimiz false dönerse i değişkenine bir sonraki sayfanın kaçıncı sayfa olduğunu belirtiyoruz.
}
return false; // Fonksiyonunun daha işlem yapmasına gerek kalmadığını belirtiyoruz.
});
var zamanlayici = setInterval(function() { // zamanlayici adında bir zamanlayıcı/timer belirliyoruz.
tumgenislik = i * genislik; // tumgenislik değişkenini 3. satırda açıklamıştık. Hangi sayfada isek o ve ondan önceki sayfaların/divlerin genişliklerinin toplamını alıyor.
if(i==4){ // #slider 'ımızı son sayfaya geldiğini kontrol eden şart cümleciği
i = -1; // Normalde ilk sayfamız için 0 değeri verilmesi gerek. Fakat alt satırda animasyon fonksiyonu çalışıp #slider sola doğru kayacağı için -1 değerini veriyoruz.
}
animasyon(tumgenislik); // #slider 'ımızın vakti gelince uygulayacağı animasyon fonksiyonu. #slider 'ı tumgenislik değişkeninin değeri kadar sola kaydırıyor.
i++; // Zamanlayıcı her çalıştığında bir sonraki sayfaya/dive geçmesi için i değişkenini her seferinde 1 arttırıyoruz.
}, 8000); // Buradaki değer ise zamanlayıcımızın kaç milisaniyede bir çalışması gerektiğini belirtiyor.
});
