mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Hazırladığım Slayt Uygulamam
Daha önce duyurmuş olduğum jquery ile slayt uygulamamım kodlarını ve nasıl yaptığımı bu yazımda sizlerle paylaşacağım. Bu uygulama bana göre oldukça faydalı bir çalışma oldu. Çünkü; bu uygulama ile çok daha renkli reklamlar, manşet alanları, slaytlar hazırlayabiliriz. Şimdilik slayt uygulaması olarak hazırladım. Önümüzdeki günlerde bu yöntem ile manşet alanı oluşturmayı düşünüyorum. Umarım hoşunuza giden bir çalışma olmuştur.

Uygulamamızın kodlarına bakalım. Öncelikle uygulamamızın html yapısına bakalım.

<div id="alan">
  <img src="resimler/turk1.png" />
  <img src="resimler/turk2.png" />
  <img src="resimler/turk3.png" />
  <img src="resimler/turk4.png" />
  <img src="resimler/turk5.png" />
  <img src="resimler/turk6.png" />
  <img src="resimler/turk7.png" />
  <img src="resimler/turk8.png" />
</div>
<div>
  <span id="sayfa_no"></span>
</div>

Uygulamamızın bu yapı için hazırlamış olduğum script kodları ise şöyle;

<script type="text/javascript">
  var aktif = 1; var timer;
  $(document).ready(function(){
    $("#alan img").hide();
    $("#alan img:first").show();
    sayfalar();
    renk(1);
    timer = setInterval(degistir,2000);
  });
  function degistir()
  {
    $("#alan img:nth-child("+aktif+")").hide();
    aktif = (aktif + 1) % $("#alan img").length;
    if(aktif == 0) aktif = $("#alan img").length;
    $("#alan img:nth-child("+aktif+")").fadeIn(1000);
    renk(aktif);
  }
  function tikla(deger)
  {
    renk(deger);
    $("#alan img:nth-child("+aktif+")").hide();
    aktif = deger;
    $("#alan img:nth-child("+aktif+")").fadeIn(1000);
    clearInterval(timer);
    timer = setInterval(degistir,2000);
  }
  function renk(deger)
  {
    $("#sayfa_no span").css("background-color","#800")
    $("#sayfa_no span:nth-child("+deger+")").css("background-color","#c00");
  }
  function sayfalar()
  {
    var sayfa_no = "";
    for(var i = 1; i <= $("#alan img").length; i++)
    {
    sayfa_no += "<span class='sayfa' onclick=tikla("+i+")>"+i+"</span>"
    }
    $("#sayfa_no").html(sayfa_no);
  }
</script>

Görüldüğü gibi kodlarımız bu kadar. Html alanda istediğimiz gibi deişiklik veya ekleme çıkarma yapabiliriz. Oldukça faydalı bir çalışma oldu. Çalışmanın örneğini aşağıda görebilirsiniz.


Uygulamanın kaynak dosyalarına buradan ulaşabilirsiniz. Uygulamayı buradan da test edebilirsiniz.

İyi Çalışmalar!
Mehmet Duran 14 Aralık Pazar 2008 8 2698 5,0
Javascript Web Tasarım jQuery Jquery Benden Tanıtım Tasarım-Görsellik
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Herşey Tam Bir Yıl Önce Başladı Visual Studio'da Kendi Code-Snippet'lerimizi Kullanma Host Sorunu ve Bloğuma Erişim Sıkıntısı Yoğunluk, Yaşanan Problemler Veritabanı İlişkisi ile Accordion Menü Oluşturma
Yorumlar
Yorum Yaz
RSS Yorum Takibi
simsek 18 Aralık Perşembe 2008 22:58 #1
Cok güzel bir uygulama.Ellerine saglık mehmet:)
Alper MEMİŞ 16 Haziran Salı 2009 13:39 #2
Hocam öncelikle sizi tebrik ederim.Sizden bir ricam var.Bu Konuyu biraz daha detaylı ve veri tabanı bağlantılı olarak anlatmanız mümkünmüdür.
Mehmet Duran 16 Haziran Salı 2009 13:47 #3
Veritabanıyla yapmak için sadece verileri çekip bu uygulamadaki gibi bir html`e gömmek gerekiyor. Data kontrol olarak repeater kullanırsan rahatlıkla yapabilirsin.
mylo 02 Ağustos Pazar 2009 14:54 #4
anlatırmısın verı tabanından cekmeyı sımdıden tsk
Mehmet Duran 02 Ağustos Pazar 2009 23:27 #5
Veritabanı ile entegre etmek için buradaki örnek yararlı olabilir.
Atilla 06 Aralık Pazar 2009 12:18 #6
Çok güzel olmuş elinize sağlık peki birde her resimin başlığı olsa ve resim path ve başlık bilgileri veritabanından gelse nasıl olur?
Mehmet Duran 06 Aralık Pazar 2009 21:04 #7
Daha önce birçok kez soruldu ama böyle birşeyi yapıp paylaşmak istemiyorum. Kötü niyetli birçok kişi mevcut. Bunu yapmak için repeater kontrolünü kullanmak ve içeriğini bu uygulamadaki gibi hazırlamak gerekiyor.
Çaylak yazılımcı 29 Mart Pazartesi 2010 19:54 #8
Süper bişey bu.Emeğine sağlık arkadaşım.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Şans bir uğraşının eseridir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009