02:23
a
Bir çok webmaster acemi olsun ya da profesyonel olsun sitesine slider ekleme hevesine mutlaka kapılmıştır. Lakin bunların çoğu hüsranla sonuçlanıyor. Piyasada ki hazır sliderlar nekadar kaliteli olursa olsun bir yerden sonra artık ihtiyaçlarımızı karşılamaz hale geliyor. Bu durumla başa çıkmanın en iyi yolu ise kendi sliderımızı yazmaktır. Bu makaleyi okuduktan sonra herkes kendi slider’ını yapabilir durumda olacak.
İlk olarak belirteceğim şey burda okuyacağınız bazı şeylere yabancı kalmamanız açısından bundan önceki iki makaleyi okumanızı tavsiye ederim. JQuery kütüphanesini ve kendi çalışma dosyamızı sayfamıza çektikten sonra şimdi klasik olarak yapacağımız şeyi yapalım yani html yapımızı oluşturalım. Ben slider’ımda ki ağaç yapıyı oluşturmak için ul->li yapısını kullanacağım.
<html>
<head>
...
<style type="text/css">
* {margin:0;padding:0} /*bütün elementleri margin ve padding değerlerini sıfırlıyorum*/
#slider {width:400px;height:300px;border:solid 1px #000;overflow:hidden;margin:100px auto;background:#ddd;color:#F00}
#slider ul {list-style-type:none}
#slider li {width:400px;height:300px;display:none} //Block yapma sebebimiz ilk açılıştaki diğer liler alan işgal etmesin ve tarayıcılarda sorun oluşturmasın
#slider li.first {display:block !important} //ilk li'yi block yaptım. important dedim çünkü üstteki genel tabirden üstün olmalı
</style>
</head>
<body>
<div id="slider">
<ul>
<li> içerik 1
</li>
<li> içerik 2
</li>
<li> budamivardi.com
</li>
</ul>
</div>
</body>
</html>
Burada html yapımızı li ile ağaç bir yapıda tanımladık . Siz bunu li kullanmadan direk resimler ya da divler ilede yapabilirsiniz. Ama ben ul->li yapısını seven birisi olarak daha düzenli oldukları için onları kullandım. Şimdi gelelim JQuery kodlarımızı yazmaya.
/* ilk olarak bir kaç değişken atamam gerekecek
bunlardan biri geçiş süresi, diğeri kaç adet li var onu taşıyacak
bir diğeri timer olacak, son bitaneside ise sayac olacak. */
var sliderSure = 3000; // 1000 deri 1 saniyeyi temsil eder. Slider 3 saniyede döncek.
var sayac = 1; //sayac birden başlıyor çünkü first isimli klasımız açık
var sliderAdet = null;
var sliderTimer = null;
function sliderGecis(){
if (sayac > sliderAdet){sayac==0}; // eğerki sayac değeri slider'dan büyük ise sıfırlansın.
$("#slider ul li").fadeOut(0);//bütün li ler kapatılıyor.
$("#slider ul li:eq(" + sayac + ")").fadeIn(400) //burada sırası gelen slider açılıyor. Eq sıra belirtiyor. 400 ise olayın nekadar zamanda gerçekleşeceğini
sayac++ // Sayaç bir artıyor.
};
/* Fonksiyonumuz hazır hale geldi.
Şimdi yapacağımız işlem ise timer'ı tanımlamak ve boş olan değişkenlerimizi doldurmak
Bunları document.ready() olayında yapacağız. Yani sayfa yüklendikten sonra çalışacaklar*/
$(document).ready(function(){
sliderAdet = $("#slider ul").children().size()-1 // #slider ul içindeki çocuk yani li sayısı. -1 yaptım çünkü sıfırdan başlamalı. Eq tanımalasının ilk değeri sıfır.
$("#slider ul li").fadeOut(0); // ilk etapta hepsini kapattım.
$("#slider ul li:eq(0)").fadeIn(0); // ilk liyi açtım.
sliderTimer = setInterval('sliderGecis()',sliderSure); //Burada timer'ımı tanımladım. sliderSure'deki sürede bir kez sliderGecis() fonksiyonu çalışacak
});
Slider’ımız şuanda çalışır hale gelmiş durumda. Slider üzerinde biraz çalışarak çeşitli şekillerde kullanabilirsiniz. setInterval timer oluşmark için kullanılır. Eq()ise gene bir JQuery elementi olmakla beraber, bir alt çocuğun sırasını belirtmek için kullanılır ve ilk çocuğun değeri sıfırdan başlar. $(element).children().size()elementin alt çocuk sayısını verir ve ilk çocuk için 1 den başlar. Bu iki farkı mutlaka hatırlayın. Dosyaları siteye yüklüyorum. Anlaşılmayan kısımları yorum olarak sorabilirsiniz. Bir sonraki derste bu slider’ı geliştirerek üzerine mouse event’ları ve butonlar ekleyerek çalıştıralım. Şimdiden kolay gelsin. Tekrar görüşmek üzere.
