WWW WATCH

結構前に公開されているので、すでに使っている人もいるかと思いますが、最近、個人的な用途で使わせていただいたので紹介。

Brand Spanking New で公開されている、「Javascript / CSS Crossfader」 は、JavaScript ひとつで簡単に、任意の div 要素 （じゃなくてもいいんですが） をクロスフェード表示で切り替えてくれるスクリプト。スクリプト自体が軽いのと、設定も簡単なので、ちょっとした画像の切り替えなんかに重宝しそう。

デモがこちらで公開されています。

必要なのは JavaScript ファイル 1つのみ。ダウンロードした JavaScript ファイルをサーバに上げたら、(X)HTML ファイルに読み込みます。

<script type="text/javascript" src="/js/bsn.Crossfader.js"></script>

切り替える (X)HTML ソースは下記のように。

<div id="cf1">
 <p>first content</p>
</div>
<div id="cf2">
 <p>second content</p>
</div>
<div id="cf3">
 <p>third content</p>
</div>

必ずやらなければいけないのは、id 属性を任意で付けるってことだけ。この id 属性値が切り替え設定時に必要なので、切り替え順などで適当に名前付けておきます。

<div id="value">
 ･･･
</div>

最後に、

var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );

という形で、切り替えの順番とタイミングを記述してあげます。

new Array('cf1','cf2','cf3'),

この部分が、先ほど付けた id 属性値になります。左から記述した順に表示されます。

500, 2000

最後の数字は、各 div 要素の切り替わるタイミングです。この例だと、

cf1 → cf2 ： 500ms
cf2 → cf3 ： 2000ms

2/18追記
すいません。上記の説明は間違いです。正しくは下記です。（rytich さんコメント感謝）

The constructor takes three variables: an array containing the ids of the divs to be faded, the fade time (in milliseconds), and the delay between fades (also in milliseconds).

• フェードエフェクトの時間 ： 500ms
• 各 div 要素の表示時間 ： 2000ms

この記述は下記のように、(X)HTML ファイルに直接記述でもいいですし、

<script type="text/javascript">
 var cf = new Crossfader( new Array('cf1','cf2','cf3'), 500, 2000 );
</script>

外部ファイルに記述して、下記のように読み込んでも OK です。

<script type="text/javascript" src="/js/setting.js"></script>

あとは、CSS で見た目を整えれば完成。