フェードイン&アウトするスライドショー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を使ったブログテンプレート作成しますわ。

お楽しみに~!

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ