小粋空間: 表示するデータを周期的に切り替える

Top ＞ JavaScript ＞表示するデータを周期的に切り替える

2005年12月19日

表示するデータを周期的に切り替える

Posted at December 19,2005 11:56 PM
Category：[JavaScript]
Tag：[Customize, JavaScript]

お知らせ等のちょっとしたデータの表示を周期的に切り替えるカスタマイズです。サンプルでは3秒周期でデータを切り替えるように設定しています。テンプレートに依存しませんので、JavaScript が使えればどのツールでも利用可能です。

以下、カスタマイズ方法です。

１．本文の設定

テンプレートの任意の位置、例えばお知らせに使用するのであれば、中央カラム上部等に下記の設定を挿入します。

<div id="info1">
お知らせ１
</div>
 
<div id="info2">
お知らせ２
</div>
 
<div id="info3">
お知らせ３
</div>

例は3種類のお知らせ用フォーマットを用意していますので、青色の部分にお好きな内容を設定してください。

２．イベントハンドラの設定

body 要素に青色のように onload イベントハンドラの設定をします。

<body onload="setInterval('changeLink()',10000)">

中に設定されている「10000」の部分は、msec（1/1000秒）を表す単位を設定します。「10000」は10秒周期を示しています。setInterval は JavaScript で用意された関数で、起動する関数と、周期を設定します。onload イベントハンドラでこの設定が実行されます。

３．スクリプトの設定

１項で設定した部分のすぐ下に、下記のスクリプトを追加します。

<script type="text/javascript">
var max = 3;
var n = 1;
function changeLink() {
    for(i = 1; i < max+1; i++){
        document.getElementById('info'+i).style.display = 'none';
    }
    if(!n || n > max) n = 1;
    document.getElementById('info'+n).style.display = 'block';
    n++;
}
changeLink();
</script>

４．フォーマットを増やす

フォーマットを増やす場合は、１項で設定した本文の下に、

<div id="info4">
お知らせ４
</div>
 
<div id="info5">
お知らせ５
</div>
　　　　：

という具合に、同じタグ構造のものを追加します。赤色の n には上から順番に数字を振ってください。最初のリストでは info3 まで割り振られているので、新しく追加する場合は順に info4、info5、… と割り振ります。

それから、フォーマットの合計数を、３項の2行目にある max の右辺に設定します。5種類のフォーマットを表示する場合は

var max = 3;

となっている部分、下記のように

var max = 5;

「5」に修正してください。

５．注意事項

アフィリエイトの商品リンク切り替えに使用される場合、利用規定で禁止されている場合もありますので、十分ご注意ください。

６．その他

２項のイベントハンドラの設定を行わずに、setInterval を３項のリストの最後に追加して

　　　：
changeLink();
setInterval('changeLink()',10000)";
</script>

とする手もあります。

Posted by yujiro

« Movable Typeブログ拡張パーツ&デザインガイド―プラグインや無料サービスを活用したブログの機能/デザインパワーアップ術 | Main | HP Compaq nx4820/CT Notebook PC »

人気エントリー

トラックバックURL

このエントリーのトラックバックURL:

このブログは重複トラックバック防止プラグインにより、同一エントリーに対する同一のトラックバックは登録されないようにしています（記事のタイトルまたは記事の概要が異なる場合は登録されます）。

コメントする

名前（N）: *必須

メールアドレス（M）:

URL（U）:

情報を保存する？

お知らせ：2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

コメント（C）:

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）