リスト(liタグ)の情報を1行ずつ切替えて1行ニュースの様に表示する方法

リスト(liタグ)の情報を1行ずつ切替えて、1行ニュースの様に表示させます。

1.CSSの記述例

<style type="text/css">
<!--
#idNews{
	border:solid 1px #CCCCCC;
	width:370px;
	margin:0 auto;
	text-align:left;
}
#idNews ul {
  height: 25px;
  line-height: 25px;
  overflow: hidden;
}
#idNews li {
	list-style-position:inside;
	list-style-type:none;
}
#idNews li a{
	text-decoration:underline;
	color:#333333;
}
#idNews li a:hover{
	text-decoration:underline;
	color:#666666;
}
-->
</style>

2.JavaScriptの記述例

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	function fncnews() {
		setTimeout(function() {
			fncnews();
			$("#idNews li").not(':first').css('display', 'none');
			$("#idNews li:first").fadeOut('normal', function() {
				$(this).next().fadeIn('normal');
				$(this).clone().appendTo("#idNews ul");
				$(this).remove();
			});
		}, 2000);
	}
	var n_size = $("#idNews li").size();
	if(n_size > 1) {
		fncnews();
	}
});
</script>

3.HTMLの記述例

<div id="idNews">

<ul class="xoxo categories">

 	<li class="cat-item cat-item-36"><a href="https://dad-union.com/category/css">css</a></li>


 	<li class="cat-item cat-item-2"><a href="https://dad-union.com/category/javascript">JavaScript</a></li>


 	<li class="cat-item cat-item-3"><a href="https://dad-union.com/category/jquery">jQuery</a></li>


 	<li class="cat-item cat-item-53"><a href="https://dad-union.com/category/php">PHP</a></li>

</ul>

</div>
<!--/idNews-->

liタグの情報を1行でずつ切替えて表示するデモページ

如何にしてページのスペースを効率的に使うかになってきますよね。