Bu yazımda bir önceki yazımda anlattığım setInterval fonksiyonu ve jquery'yi kullanarak değişir alan yapacağız. Bu uygulamayı bir çok yerde kullanabiliriz. Örnek verecek olursak; haber başlıklarını göstermek için, harhangi bir blogdan siteden aldığımız rss başlıklarını göstermek için, resim - fotoğraf slaytı hazırlamak için veya manşet alanlar yapmak için bu uygulamayı kullanabiliriz. Kodlarımıza bakalım.

Bu uygulamayı kendim hazırladım. Html kodlar ve script kodlarında değişiklik yaparak uygulamayı çok daha güzel hale getirebiliriz.

Öncelikle html kodlarımıza bakalım.

<div id="alan">
	<a href="#">Haber, Rss Başlığı 1</a>
	<a href="#">Haber, Rss Başlığı 2</a>
	<a href="#">Haber, Rss Başlığı 3</a>
	<a href="#">Haber, Rss Başlığı 4</a>
	<a href="#">Haber, Rss Başlığı 5</a>
	<a href="#">Haber, Rss Başlığı 6</a>
</div>

Daha sonra jquery, javascript kodlarımıza bakalım.
 

<script type="text/javascript">
	var aktif = 1;
	$(document).ready(function(){
		$("#alan a").hide();
		$("#alan a:first").show();
		setInterval(degistir,2000);
	});
	function degistir(){
		$("#alan a:nth-child("+aktif+")").slideUp(300);
		aktif = (aktif + 1) % $("#alan a").length;
		if(aktif == 0)
			aktif = $("#alan a").length;
		$("#alan a:nth-child("+aktif+")").slideDown(300);
	}
</script>

Kodlarımız böyle. Javascript ve jquery bilgimiz var ise bu kodlamaları rahatlıkla anlayabilir ve değiştirebiliriz.

Tamamen kendim hazırladım. Bunu belirtmemin nedeni ise; daha önce bu tür uygulamaları başka sitelerden görüp ve sizlerle paylaşıyor olmamdı. Artık bu tür uygulamaları kendim hazırlayabiliyorum. Bu uygulama da bunlardan ilki diyebiliriz. Umarım devamı gelir ve sizlerle paylaşmaya devam ederim.

Haber, Rss Başlığı 2 Haber, Rss Başlığı 3 Haber, Rss Başlığı 4 Haber, Rss Başlığı 5 Haber, Rss Başlığı 6

İyi çalışmalar!