【技術メモ】TOPイメージのローテーション表示

2010年4月6日　カテゴリ：スタッフDiary, スパイス屋さん運営日記　タグ：

店長です。

以下、サイト制作に関する備忘録ですので、興味のない人はさらっと流して下さい。書いておかないとどうやったか忘れちゃうので・・・備忘録というヤツです。

とてもシンプルで簡単な方法なので、同じようなことやりたいと思っている人は参考にしてもらえれば。

■要件

スパイスラックWebサイトのTOPメインイメージを静的一枚画像から、複数自動切り替え表示にしたい。
切替時にクロスフェード効果が欲しい。
画像枚数やフェードの時間、表示時間は自由に設定できるように。

■前提

FLASH使えない（技術的に、と言うかソフトがない）。
CGI/PHPが上手く動かない（レンタルサーバー的に）。
jQuery等を利用した複雑なJavescriptは避けたい（技術がない、時間がない）。

■実装

Javascriptで実装。
「bsn.Crossfader.js」を使用。
jsファイルはこちらからダウンロード（リンク先消滅）。

■手順

<head></head>内に「bsn.Crossfader.js」へのパスを記述。（例）
```
<script src="js/bsn.Crossfader.js" type="text/javascript"></script>
```

ローテーション画像を表示させたい場所に、画像数分のHTMLを表記。各画像を<div></div>でくくり、divに任意かつ一意のidを振る。（例）

<div id="banner1">
<a href="mixedspice.html" id="topimg">
<img src="img/top_img2.jpg" alt="ああ" width="790" height="140" border="0" />
</a>
</div>
<div id="banner2">
<a href="organic.html" id="topimg">
<img src="img/top_img.jpg" alt=いい" width="790" height="140" border="0" />
</a>
</div>

2のHTML表記より後<body></body>内に、下記の呼び出しJavascriptを記述。（外部jsファイル化してもOK）
```
<script type="text/javascript">
var cf = new Crossfader( new Array('banner1','banner2'), 500, 3600 );
</script>
```
呼び出しJavascriptの「(‘banner1′,’banner2’)」には、HTML部分で指定したidを記述。
「500, 3600」については、「500」がクロスフェードの適用時間、「3600」が一枚あたりの画像表示時間。単位はミリセコンド。
見た目の整形はCSSで調整。

以上。

余談ですが、これ実装したら、IE7で画像が右側に大胆にはみ出てしまいました。原因は、上記HTML部分に対するCSSを「text-align:center」にしていたから。「text-align:left」にしたら落ち着きました。
該当エリアに対してのcenter指定だから間違ってない筈なんですが・・・多分IE7独自のバグなのでしょう。
本当IE7ってダメなブラウザ・・・

さらに余談。
上記のようにブログ内に直接コードを表記する場合、<pre>タグを使いますが、普通にやっちゃうと、長いコードが自動的に改行されずに右側にどこまでもはみ出てしまいます。
この場合、下記CSSを適用してやると綺麗に改行されて収まりますよ。

pre {
    overflow: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

それでは、今日だけなんちゃってWebデザイナー的なブログでした。
（あ、ぼくは素人です。念のため）

【技術メモ】TOPイメージのローテーション表示

関連記事