これであればフラッシュを使わずにAjaxのみで画像のフェードイン、フェードアウトをさせることができる
またフェードイン、フェードアウトで画像が消えたり出てきたりする時間を個別に調整できる。
widget fader サンプル
http://web-directors.net/sample/fader/samplefader.html
サンプルのHTMLソースを解説
http://web-directors.net/sample/fader/samplefader.html
サンプルのHTMLソースは、下記のようなソースコードになっているので下の解説をみつつ利用してください
ーーーーーーーーーーーーーーーーーーーーーーーー
「prototype.js」「effects.js」「fader.js」読み込み
をおこなう この３つのファイルが画像のフェードイン、フェードアウトの処理をしてくれている
<script src='js/prototype.js'></script>
<script src='js/effects.js'></script>
<script src='js/fader.js'></script>
<script>
Event.observe(window, "load", function() {
//Images Array used in all demos
var images = [
↓↓切り替え表示したい画像を順番に記載していく
"images/fader/GN023_L.jpg",
"images/fader/GN028_L.jpg",
"images/fader/GN032_L.jpg",
"images/fader/GN037_L.jpg",
"images/fader/GN043_L.jpg"
];
//Default fader
こちらのnew Widget.Fader（）の最初のパラメーター「defaultDemo」が<body>以下に記載されるフェードイン、フェードアウトの処理をさせたい画像の<img>タグのid名になります
new Widget.Fader("defaultDemo", images);
//Fader with options
new Widget.Fader("optionsDemo", images, {
fadeInDuration: 0.6,
<!-- フェードインの処理にかかる時間を設定する 上記の場合 0.6秒 -->
fadeOutDuration: 0.3,
<!-- フェードアウトの処理にかかる時間を設定する 上記の場合 0.3秒 -->
displayDuration: 0.3
<!-- 画像が表示さている時間を設定する 上記の場合 0.3秒 -->
});
});
</script>
</head>
<body>
↓はじめにでてくるデフォルトの画像をいれておく
この場合「GN023_L.jpg」になる。
また、「id='defaultDemo'」は
「new Widget.Fader("defaultDemo", 」でつけた「new Widget.Fader」のパラメーターが入ります。
-->
<img id='defaultDemo' src='images/fader/GN023_L.jpg' />
〜
〜
〜
ーーーーーーーーーーーーーーーーーーーーーーーー
本家サイトはこちら↓
http://www.eternal.co.za/scripts/fader/
ページの一番下にdownloadがあるので、そちらからスクリプトを取得して利用してください。
ダウンロードすると、いろいろファイルがはいってきますが、その中から「js」フォルダを開くと
で利用する、「prototype.js」「effects.js」「fader.js」がはいっていますのでそちらをリンクさせてください。
上のコードを実際に表示してみたサンプル
http://web-directors.net/sample/fader/samplefader.html
と同じように作る場合は「prototype.js」「effects.js」「fader.js」以外のjsファイルは必要ありません
