フェードイン＆アウトするスライドショー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タグで囲む。
（例：imgフォルダの中にimg1.jpgからimg7.jpgの画像をアップにした場合。）
みたいな感じですわ。
ブログのヘッダー部分とかにあってもいいかも。って思ってしまった。。。
っちゅうわけで、後日、このxfade2.jsを使ったブログテンプレート作成しますわ。
お楽しみに～！
|
|
|
