Javascript ile banner yapma

09 / Nisan / 2008 Author

İsa Engiz

javascript Tags

banner, javascript Yorumlar

1 Yorum Yapilmis.

Eğer bir sloganınız varsa ve bunu resimler ile göstermek/anlatmak istiyorsanız en iyi yol bir banner yapmaktır, değil mi? Ama bir banner yapmak için Flash bilmenize gerek yok, javascript ile bunun üstesinden gelebilirsiniz.

jsbanner-resim

Bu uygulamamızda yapacağımız örneğin canlı haline buradan bakabilirsiniz veya dosyaları buradan indirebilirsiniz.

Resimler

Yapacağımız uygulama aslında çok basit, elimizde bulunan resimlerin arka arkaya gösterilmesini sağlayacağız, bunu yapmak için de javascript’den faydalanacağız.

Resimleri, doküman yüklenirken yüklenmesini sağlıyoruz:

<img id="banner1" src="1.jpg" style="display:block;" />
<img id="banner2" src="2.jpg" style="display:none;" />
<img id="banner3" src="3.jpg" style="display:none;" />
<img id="banner4" src="4.jpg" style="display:none;" />
<img id="banner5" src="5.jpg" style="display:none;" />
<img id="banner6" src="6.jpg" style="display:none;" />
<img id="banner7" src="7.jpg" style="display:none;" />
<img id="banner8" src="8.jpg" style="display:none;" />

dokümanımız yüklendiğinde sadece 1. resim görünür durumda.

Javascript kodu

İlk önce doküman yüklendiğinde javascript fonksiyonunu başlatıyoruz:

<body onload="bannerBaslat()">

Böylece html dokümanı yüklendikten sonra bu fonksiyon çağrılacak.

BannerBaslat() fonksiyonu ise şu şekilde:

function bannerBaslat()
{
	setTimeout('degistir()', 3000);
}

bu fonksiyon, kendisi çağrıldıktan 3 saniye sonra degistir() fonksiyonunu devreye sokuyor.

Degistir() fonksiyonu ise şu şekilde:

function degistir()
{
	if (resim == "banner1")
	{
		document.getElementById("banner1").style.display = "none";
		document.getElementById("banner2").style.display = "block";
		resim = "banner2";
		bannerBaslat();
	}
	else if (resim == "banner2")
	{
		document.getElementById("banner2").style.display = "none";
		document.getElementById("banner3").style.display = "block";
		resim = "banner3";
		bannerBaslat();
	}
.....
......
.....

Bu fonksiyon, kendisi çağrılınca aktif resmin görünüşünü “none” yapıp bir diğerini “block” haline getiriyor ve tekrardan bannerBaslat() fonksiyonunu çağırıyor. BannerBaslat() ise 3 saniye sonra tekrar bu fonksiyonu çağıracak ve böylece resimlerimiz sergilenmeye devam edecek.

İşte bu kadar!

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!