JQuery ile Kayan İçerik Gösterme

 bcakir
 16 Ekim 2011

Merhaba arkadaşlar yeni biz yazıyla tekrar buluştuk. Bu yazımda JQuery ile slider yapmayı göstereceğim. Artık flash öğrenmek zorunda kalmadan, Jquery ile kayan içerik gösterimi yapabileceksiniz. Uygulamamız haber sitelerinin son dakika gelişmelerini gösterdiği manşet gösterme ekranına benzeyecek. Daha önceki uygulamalarımızda yaptığımız gibi yine JQuery ile yazılmış hazır bir kütüphane kullanacağız. Bundan dolayı da çok kısa bir sürede ve az kodla uygulamayı geliştireceğiz. Siz sadece resimleri değiştirerek uygulamayı kolayca kendinize uyarlayabilirsiniz. Uygulamamızın çalışabilmesi için bazı dosyalara ihtiyacınız var bundan dolayı da yazımızın sonunda uygulamamızın bütün betik ve resimlerini içerek çalışır halini sizlere vereceğim. Şimdi uygulamamızı yapmaya başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>JQuery ile Kayan İçerik Gösterme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link type="text/css" href="css/screen.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#promo').cycle({
		fx     :'scrollHorz',
		timeout:4000,
		speed  :800,
		next   :'#promonav .next',
		pager  :'#promoindex',
		height :200,
		pause  :1
	});

});
</script>
</head>
<body>
<div id="cerceve">
    <h1>bcakir - Slider</h1>
    <ul id="promo">
        <li><img src="images/water.jpg" alt="Slide One" /></li>
        <li><img src="images/hills.jpg" alt="Slide Two" /></li>
        <li><img src="images/park.jpg" alt="Slide Three" /></li>
    </ul>

    <div id="promonav">
        <a href="javascript:void(0);" class="next">Sonraki >></a>
        <div id="promoindex"></div>
    </div>
</div>
</body>
</html>

Uygulamamızı JQuery ile yazılmış hazır kütüphaneyle kolayca yaptık ve resimlerimizi gösterdik. Siz isterseniz resim boyutu, gösterim sayısı gibi özellikleri kendinize göre kolayca uyarlayabilirsiniz. Uygulamamızın bütün içeriğin çalışan, zipli halini buradan indirebilirsiniz. İndirme bağlantısını da vererek bir uygulamamızın daha sonuna gelmiş olduk. Yararlı bir yazı olması dileğiyle.

 5.971 Okunma

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

  1. çok sağol arkadaşım.

  2. genişlik olarak boyutunu ayarlayabildim ama yükseklik olarak nedense sabit.Kodları inceledim yükseklik değeri yok.Ekleme yapmama rağmen yükseklik kabul etmiyor.

  3. Merhaba,

    Örnek İçin Teşekkürler. Fakat Takıldıgım Yer Sonrakine Tıklayınca Gidiyor Öncekine Nasıl Gidecek Yardımcı Olurmusununuz

    • denemedim ama (JQuery pluginini incelemek lazım)
      fonksiyona
      prev :’#promonav .prev’,
      promonav divine

      kodunu ekleyin.

  4. Teşekkür ederiz paylaşım için, yalnız yukarı doğru div şeklinde kaydırma yapabilmemiz için ne yapmalıyız.

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

Daha fazla JQuery
Kapat