Merhaba arkadaşlar bu makalede jquery ile basit bir fadeIn fadeOut slider yapımını anlatacağım.
1) Html Yapısı
<div class=”slideWrapper”>
<img src=”/examples/images/space1.jpg” />
<img src=”/examples/images/space2.jpg” />
<img src=”/examples/images/space3.jpg” />
</div>
2) Css Yapısı
<style>
.slideWrapper {
position: relative; //içinde bulunan resimlerin pozisyonlarını bu div’den alması için position:relative yapıyoruz.
width: 600px;
height: 400px;
margin: 0 auto;
}
.slideWrapper img { //İçerideki resimleri serbest moda geçirip bulunduğu div’in sol üst köşesine alıp gizliyoruz.
position: absolute;
top: 0;
left: 0;
display: none;
}
.slideWrapper img:nth-child(1) { //nth-child ile resimlerden ilkini görünür yapıyoruz.
< display: block;
}
</style>
<
3) jQuery Yapısı
<script>
var allImages;
var imgCount;
var current = 0;
$(document).ready(function ($) {
allImages = $(“.slideWrapper img”); 1)
imgCount = allImages.length; 2)
setInterval(slide, 2500); 5)
});
function slide() {
if (current == (imgCount – 1)) { 3)
allImages.fadeOut(600).eq(0).fadeIn(600);
current = 0;
}
else { 4)
current++;
allImages.fadeOut(600).eq(current).fadeIn(600);
}
}
</script>
Adımlar:
1) Kavrayıcı altındaki tüm resimleri bir değişkene atıyoruz.2) Resimlerin sayısını alıyoruz. (Veri tabanından gelmiyorsa resimler elle bu sayıyı verebilirsiniz.)3) Eğer aktif resim index'i toplam resim sayısının 1 eksiğine eşit ise ilk resmi görünür yapıyoruz.4) Üstteki koşula uymuyorsa aktif resim indexi'ni bir arttırp o index'teki resmi görünür yapıyoruz.5) slide methodunu 2,5 saniyede bir çalıştırıyoruz.Çalışan Örneği..
http://www.kodstrap.com/examples/jquery-basit-slider.html
http://www.kodstrap.com/examples/jquery-basit-slider.html
İndirme Linki..
http://www.kodstrap.com/examples/jquery-basit-slider.rar
http://www.kodstrap.com/examples/jquery-basit-slider.rar
İyi Kodlar!
kaynak : http://www.kodstrap.com/makale/jquery-ile-basit-bir-slider-nasil-yapilir
Comments 0