JQuery ile Değişen Banner

 bcakir
 27 Aralık 2011

Merhaba arkadaşlar bu yazımda sizlerle iki farklı örnek yapacağım. İlk örnekte, belirli bir sürede değişen banner yapımını, ikincisinde ise her sayfa yenilendiğinde farklı banner gösterilme işlemini yapacağız. Bu uygulamaları yaparken JQuery kütüphanesini kullanacağız. Uygulamaları 3 tane resim için geliştireceğiz ama siz kolayca resim sayısını değiştirebilirsiniz. Bu uygulamaların güzel görünmesi için resimlerin boyutunun eşit olmasına dikkat edin. Dikkat edilmesi gerekenleri açıkladıktan sonra, uygulamaları yapmaya ilki ile başlayalım.

<!DOCTYPE html>
<head>
<title>Banner</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var a=0;
$(document).ready(function(){
    banner();
    var int=self.setInterval("banner()",3000);
});

function banner(){
    //resim sayısını girin
    if(a==3){a=0;}
    var resim = $("#resim span:eq("+a+")").html();
    $("#banner").html(resim);
    a++;
}
</script>
</head>
<body>
<div id="banner"></div>
<div id="resim" style="visibility:hidden">
<span><img src="resim1.jpg" /></span>
<span><img src="resim2.jpg" /></span>
<span><img src="resim3.jpg" /></span>
</div>
</body>
</html>

Yukarıdaki örnekte her 3 saniyede bir sonraki resmi gösteriyoruz. Siz geçiş süresini ya da resim sayısını kendinize göre değiştirebilirsiniz. Şimdi ikinci örneğimize geçelim.

<!DOCTYPE html>
<head>
<title>Banner</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    banner();
});

function banner(){
	//rastgele sayı üretme
    var rastgele=Math.floor(Math.random()*3);
    var resim = $("#resim span:eq("+rastgele+")").html();
    $("#banner").html(resim);
}
</script>
</head>
<body>
<div id="banner"></div>
<div id="resim" style="visibility:hidden">
<span><img src="resim1.jpg" /></span>
<span><img src="resim2.jpg" /></span>
<span><img src="resim3.jpg" /></span>
</div>
</body>
</html>

Bu örneğimizde ise her açılışta farklı bir resmi gösteren sabit bir banner yaptık. Ayrıca, bu uygulamalara çeşitli efekteler de eklenebilir. Eğer efekt konusunda bilgi almak ya da bu konuda çeşitli örnekler görmek istiyorsanız, buradan yararlanabilirsiniz. Yararlı olması dileğiyle, hoşçakalın.

 5.176 Okunma

Bu yazıya 5 yorum yapılmış.

  1. kardeşim sağol arayıpta bulamadığım bir koddu

  2. Sitenizde verdiğiniz sağa kayarak olan türünde olanında boyut ayarlaması yapamamaıştım (Weight değeri)..Bu daha iyi oldu..Birde sağa kayarak şekline çevirebilirsem ne mutlu bana..Teşekkürler paylaşım için

  3. çok teşekkür ederim. işime yarayacak ve aradığım kodlardı.

  4. Çok işime yaradı teşekkürler.

  5. Merhaba çok güzel bir uygulama ancak ilk örneğinizde verdiğiniz linklerden efekt uygulamak istedim yapamadım. Efekt kodunu nereye nasıl yerleştirmemiz lazım o konuda da yardımcı olur musunuz?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery
Kapat