Zamanında çok aramıştım slider örnekleri bulduklarımı buraya eklemeye çalışcam üstünde bulunan linklere tıklayıp demo ve download bölümüne ulaşabilirisiniz kolay gelsin
slider yapımı etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
slider yapımı etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
22 Haziran 2012 Cuma
20 Haziran 2012 Çarşamba
Slider Yapımı
İlk olarak index.html adında bir sayfa oluşturuyoruz
jquery kütüphanemizi dahil ediyoruz
Daha sonra Css imizi düzenliyoruz
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 linklerinin
En 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.
});
Kaydol:
Kayıtlar (Atom)