Jquery news ticker ile yeni makalelerinizi jquery efekti ile gösterebilirsiniz. Görsellik ve dikkat çekicilik açısından oldukça kullanışlı olan bu sistemi kurmak için aşağıdaki adımları takıp ediniz.

Html olarak aşağıdaki kodları kullanıyoruz

<ul id="listticker">
<li>My News 1</li>
<li>My News 2</li>
<li>My News 3</li>
<li>My News 4</li>
<li>My News 5</li>
</ul>

Sayfamızın head ve /head tagları arasına aşağıdakileri ekliyoruz

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var first = 0;
	var speed = 700;
	var pause = 3500;
		function removeFirst(){
			first = $('ul#listticker li:first').html();
			$('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$(this).remove();});
			addLast(first);
		}
		function addLast(first){
			last = '<li style="display:none">'+first+'</li>';
			$('ul#listticker').append(last)
			$('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}
	interval = setInterval(removeFirst, pause);
});
</script>

son olarakta css dosyamıza aşağıdakileri ekliyoruz

#listticker{
height:200px;
width:400px;
overflow:hidden;
border:solid 1px #DEDEDE;
padding:6px 10px 14px 10px;;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:60px;
padding:5px;
list-style:none;
}
#listticker a{
color:#000000;
margin-bottom:
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:4px;
font-size:11px;
}
#listticker .news-text{
display:block;
font-size:11px;
color:#666666;
}
#listticker img{
float:left;
margin-right:14px;
padding:4px;
border:solid 1px #DEDEDE;
}

Makale için yapılan aramalar

• jquery news
• jquery news ticker
• jquery news slider
• feeds ticker html kod
• jquery newsticker