フェードイン&アウトするスライドショーJavaScript: xfade2.js

あいあい。どうもどうも。
今日はですねぇ。クライアントさんのサイトを作っておりまして、サイトのトップページで数枚の写真をフェードイン&アウトしながら見せたい。っちゅうご依頼がございました。

普通なら、Flashでちゃっちゃと作ってしまえばいいのでございますが。。。(クライアントさんも参考サイトとしてFlashサイト送ってきたし・・・)
それじゃぁ、面白くないなぁ。っと思ってしまい・・・

探しましたよ。で、見つけましたよ。

JavaScriptでそれが実現できるんですわ。

こんなんじゃ↓

スーパーサイズ・ミー いい湯だな 酒や!酒や! 檻に入ってなさい! のどがしゅわ~ってして、おいしい。 何見とんねん! 焼けちまったぜ。


このJavaScriptはこちら→slayeroffice.comさんのサイトから拝借いたしましてん。

実装方法:

1. slayeroffice.comさんのサイトからxfade2.jsをダウンロードする。(右クリックで、対象を保存で)

2. xfade2.jsをFTPでアップロード。

3. 表示したいhtmlの<head>から</head>の間に↓

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

って書く(例:public_html以下にxfade2.jsをアップした場合。)

4. CSSを追加する↓

#imageContainer {
position:relative;
margin:auto;
width:500px; /*画像の横幅*/
border:1px solid #000; /*画像のまわりのボーダー*/
}

#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}



5. 画像をアップロードして、htmlを書く↓
注: 下のサンプルのように、id=”imageContainer”のdivタグで囲む。

1枚目の画像 2枚目の画像 3枚目の画像 4枚目の画像 5枚目の画像 6枚目の画像 7枚目の画像

(例:imgフォルダの中にimg1.jpgからimg7.jpgの画像をアップにした場合。)

みたいな感じですわ。

ブログのヘッダー部分とかにあってもいいかも。って思ってしまった。。。
っちゅうわけで、後日、このxfade2.jsを使ったブログテンプレート作成しますわ。
お楽しみに~!

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です