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 14 29955 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 Bloğumun Google Pagerank Değeri 2 Oldu Jquery İnner Fade Uygulaması Jquery ile Tab Şeklinde Menü Hazırlama Sitemi Yeniden Yapıyorum jQuery ile Modal Hazırlama (Eklenti ile)
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.
Hatice 12 Ekim Salı 2010 18:00 #9
Çok teşekkürler çok güzel bir uygulama. Ama bu resimlerin sol- sağ yönünde kaymasını nasıl sağlarız? Jquery de çok yeniyim.
Mehmet Duran 13 Ekim Çarşamba 2010 16:29 #10
@Hatice, burada paylaştığım örneği inceleyerek yapmak istediğin uygulamaya uyarlayabilirsin.
MUHARREM 23 Ekim Cumartesi 2010 17:28 #11
merhaba; elinize sağlık çok güzel yazmışsınız. bir sorum olucak veritabanından resim cektiriyorum kodunuzla fakat ie ve firefox'ta 1-2-3-4 rakamların üzerinde dolaşırken ie sapıtıyor (resimleri yüklerken sayfa aşağı yukarı hareket ediyor) firefox ise sanki aşağıdan resim getiriyor gibi davranıyor bir türlü çözemedim yardımcı olursanız sevinirim.
Mehmet Duran 26 Ekim Salı 2010 16:35 #12
@Muharrem, bunun ben de farkındayım. Bunu düzgün biçimde yapmak için resmi bir div veya table elementinin içine alıp, her resim için bu elementin yüksekliğini ayarlamak gerekebilir. Veya her resim yerine bu elemente her resmin sığacağı biçimde en başta yükseklik genişlik değeri verilirse geçişlerde aşağı yukarı kaymalar olmaz.
bedir 15 Şubat Salı 2011 22:39 #13
Merhaba Hocam, Alttaki rakamları resimden sonra değil de resmin altında (resmin üzerinde olacak şekilde) nasıl ayarlayabiliriz? Teşekkürler
Mehmet Duran 08 Nisan Cuma 2011 22:09 #14
@bedir, bunun için numaraların olduğu kısmın css kodları ile oynamak gerekiyor. Position, left, top gibi değerler verilerek ilgili bölümün istediğin herhangi bir yerde olmasını sağlayabilirsin.
İ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