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;」を指定しておけば表示されません。
次は何作ろうかな？
アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。
アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。