setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法｜DAD UNION

リスト（li）タグ要素をsetTimeoutとfadeOut・fadeInを使って、1行切替NEWSの様に表示させる方法をご紹介します。
1行で複数のリストタグを切替表示することでページ内のスペースを有効活用できます。

Contents

setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法CSSの記述
リスト（li）タグ要素をsetTimeoutとfadeOut・fadeIn使って、1行切替NEWSの様に表示させるJavaScriptの記述
setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法HTMLの記述
liタグの情報を1行でずつ切替えて表示するデモページ

setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法CSSの記述

※リストタグ（#idNews li）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
#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>

リスト（li）タグ要素をsetTimeoutとfadeOut・fadeIn使って、1行切替NEWSの様に表示させるJavaScriptの記述

※jquery.min.jsファイルを読み込みます。リストタグ（#idNews li）の数が1つ以上の場合、fncnews()関数を実行します。fncnews()ではリストタグ（#idNews li）の初めの要素を非表示にしてfadeOut・fadeInで要素を追加・削除します。setTimeoutでこの処理を繰り返します。

<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>

setTimeoutを使って複数のリストタグを1行切替NEWSの様に表示する方法HTMLの記述

※リスト（li）タグを複数用意してます。必要に応じて変更して下さい。

<div id="idWrap">

    <h1>リスト（liタグ）の情報を1行ずつ切替えて表示します</h1>

    <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-->
    
</div><!--/idWrap-->