TopJavaScript > 2005年12月
2005年12月19日

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

December 19,2005 11:56 PM
Tag:[, ]
Permalink

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

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

1.本文の設定

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

<div id="info1">
お知らせ1
</div>
 
<div id="info2">
お知らせ2
</div>
 
<div id="info3">
お知らせ3
</div>

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

2.イベントハンドラの設定

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

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

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

3.スクリプトの設定

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

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

4.フォーマットを増やす

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

<div id="info4">
お知らせ4
</div>
 
<div id="info5">
お知らせ5
</div>
    :

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

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

var max = 3;

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

var max = 5;

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

5.注意事項

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

6.その他

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

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

とする手もあります。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3