jQueryでティッカー

jQueryでティッカーを作ってみました。動作はリストの内容を順番にフェードアウト・フェードインしながら表示していくという単純な仕様です。

ソースは以下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8" />
<title>jQueryでティッカー</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function(){
	var dispNum = 0;
	$('#ticker ul, #ticker ul li').hide();
	dispList();
	function dispList() {
		$('#ticker span').fadeOut(
			700,
			function(){
				var liNum = $("#ticker ul li").size();
				if(dispNum > (liNum-1)) {
					dispNum = 0;
				}
				$(this).html($("#ticker ul li:eq("+dispNum+")").html()).fadeIn(700);
				dispNum++;
				if(1 <  liNum) {
					setTimeout(dispList,7000);
				}
			}
		);
	}
});
</script>
<style type="text/css">
#ticker {
	width: 500px;
	border: 3px double #000000;
	color: #ffffff;
}
#ticker .msg {
	padding: 5px;
	background: #000000;
}
#ticker .msg a {
	color: #ffffff;
}
</style>
</head>
<body>
<h1>jQueryでティッカー</h1>
<div id="ticker">
<div class="msg">NEWS : <span></span></div>
<ul>
<li><a href="#1">■■■■■■■■■■■■■■■■</a></li>
<li><a href="#2">○○○○○○○○○○○○○○○○</a></li>
<li><a href="#3">▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</a></li>
<li><a href="#4">□□□□□□□□□□□□□□□□</a></li>
<li><a href="#5">●●●●●●●●●●●●●●●●</a></li>
</ul>
</div>
</body>
</html>

表示の切り替えスピードは「setTimeout(dispList,7000);」の数字で調整できます。

リストはjQueryのhideで隠すようにしていますが、ページの容量があると読み込み時にリストが表示されてしまいます。それが嫌な場合はulに「display: none;」を指定しておけば表示されません。

次は何作ろうかな？

アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。