Home »

JQuery Slider Yapımı

10 Aralık 2013 Salı
jquery

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&minus;style&minus;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 belirtiyorumvar 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 gizliyoruzif(Slider < toplam&minus;1){ // slider değişkeni toplam &minus;1 den büyükse yapılacak işlem 0 a eşitlemiştim zatenSlider ++; // 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ıyoruzsetInterval(‘$.Slider(‘+ToplamLi+’)’,3000); //setınterval ile fonksiyonumzun 3 sn de bir çalışmasını istiyoruz});</script>

Kolay Gelsin :)
Tags: , , ,

Comments[ 0 ]


Yorum Gönder