JQuery ile Haber Bandı

 bcakir
 25 Ocak 2012

Merhaba arkadaşlar, son yazımızda JQuery ile son dakika haberleri uygulaması yapmıştık. Bu yazımızda ise önce yaptığımız uygulamaya benzeyen sağdan sola doğru kayan ve sıra ile yazıların yazılarak geldiği iki farklı haber bandı uygulaması yapacağız. Bu uygulamaları hazır olarak yazılmış JQuery kütüphanelerinden faydalanarak yapacağız. Ben bu uygulamalara verilen isimlendirmeyi bilmiyordum ama baya araştırınca buldum. Bu uygulamalar, genel olarak News Ticker ismiyle çağrılıyorlar. Bu isimle araştırırsanız farklı örneklerde bulmanız pek muhtemel. Bu bilgiyi de verdiğime göre hazır kütüphaneler ile iki farklı örneğimizi yapalım. Bu arada kütüphanelere ihtiyacınız olacağı için iki örneğinde içinde bulunduğu dosyayı sizlerle paylaşacağım. İlk olarak sağdan sola doğru kayan haber bandımızı yapalım.

<!DOCTYPE html>
<html>
<head>
<title>JQuery ile Haber Bandı</title>
<link rel="stylesheet" href="css/li-scroller.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("ul#haberler").liScroll({travelocity: 0.05});//hızı
});
</script>
</head>
<body>
<ul id="haberler">
	<li><span>22:04</span><a href="#">1. haberin içeriğini girin.</a></li>
	<li><span>21:54</span><a href="#">2. haberin içeriğini girin.</a></li>
	<li><span>21:50</span><a href="#">3. haberin içeriğini girin.</a></li>
	<li><span>21:40</span><a href="#">4. haberin içeriğini girin.</a></li>
	<li><span>21:27</span><a href="#">5. haberin içeriğini girin.</a></li>
</ul>
</body>
</html>

Yukarıda sola doğru kayan örneğimizi yaptık. Siz kendinize göre hızını ve haber sayısını kolayca değiştirebilirsiniz. Ayrıca stil dosyasıyla oynayarak da değişik tasarım verebilirsiniz. Şimdi gelelim yazıların yazılarak göründüğü ikinci haber bandı örneğimize.

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>jQuery News Ticker</title>
	<link href="styles/style.css?v=2011-04-25" rel="stylesheet" type="text/css" />
	<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script src="includes/jquery.ticker.js" type="text/javascript"></script>
	<script src="includes/site.js" type="text/javascript"></script>
</head>
<body>
	<h1>JQuery Haber Bandı</h1>
	<ul id="js-news" class="js-hidden">
		<li class="news-item">1. haber içeriği</li>
		<li class="news-item">2. haber içeriği</li>
		<li class="news-item">3. haber içeriği</li>
		<li class="news-item">4. haber içeriği</li>
		<li class="news-item">5. haber içeriği</li>
	</ul>
</body>
</html>

Yukarıda bulunan örneğimizde ise sadece haber içeriklerini giriyoruz, geri kalan bütün işlemi hazır yazılmış kütüphane bizim için yapıyor. Fakat id değerini değiştirmemenizde fayda var. Aksi halde kütüphane içerisinde de değişiklik yapmanız gerekir. Her iki uygulamada da istediğiniz kadar haber girebilirsiniz. Uygulamaların içerisinde bulunduğu dosyayı buradan indirebilirsiniz. İki farklı haber bandı örneği daha göstererek bir yazımızın daha sonuna geliyoruz. Yararlı olması dileğiyle.

 9.730 Okunma

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

  1. Dostum yazılarında ki uygulamaların bir demosunu koysan yazılarına çok daha süper olacak. Emeğin için tşkler

    • selçuk arkadaşımız gayet güzel özetlemiş olayı bencede bu demo olayını sitene eklersen çok iyi olur.
      oop üzerine çalışma yaparken takıldıımız yerde demolu kaynak arıyoruz ondan dolayı senin siten gayet güzel bir ışık benim açıdan ama dediğim gibi makalelerde demo olayı eksik bunu tamamlarsan sitene daha fazla users getirirsin.

  2. Hocam iyi güzel html kodunu vermişsinde bunun js ve css kodları olmadan nasıl çalışmasını bekliyorsun ?

    • Kodu incelerseniz javascript ve css dosyalarının import edildiğini ve ayrıca zipli dosyayı indirirseniz css ve javascript dosyalarının içerisinde yer aldığını görürsünüz.

  3. merhaba, ben script rengini değiştiremedim nasıl değiştirebilirim.

  4. javascript gibi bir dosyaların yapılması hakkında güzel paylaşımlarda bulunmuşsunuz benimde çok işime yaradı emeğinize sağlık.

  5. Merhaba,
    öncelikle sitedeki bilgi ve paylaşımların için teşekkürler.
    –yardımına ihtiyaç duyduğum konu
    php ile tablodaki veri başlıklarını kayan yazı şeklinde arka arkaya nasıl göstere bilirim, haber sitelerinde olduğu gibi fakat php deki (mysql) tablodan çekecek. Yardım edersen sevinirim. Örneğin; li etiketi arasına sırayla php mysql tablodan veri çekmek gibi

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

Daha fazla JQuery
Kapat