画像を順にフェードインフェードアウトで表示

質問

ＨＰのＴｏｐページのw900×h300位のスペースに
順に画像をフェードインフェードアウトしながら表示させ,最後の画像でストップさせたい

Flashムービーを作成するのは簡単なのですが、iPadに対応しない為
jQueryなどで表示させたいのですが、javaが全然わからず困っています。

一応下記のように自分で調べてみて見つけた、近いものを作っては見たものの

<script language="JavaScript"><!--
myImageCnt = 7; // 画像の数
myImage = new Array( // 画像ファイル名の設定
"img/main/f01.jpg",
"img/main/f02.jpg",
"img/main/f03.jpg",
"img/main/f04.jpg",
"img/main/f05.jpg",
"img/main/f06.jpg",
"img/main/f07.jpg"
);
myNowCnt = 0; // 現在表示している画像番号
function myChange(){ // 定期的に画像を更新する関数
if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら
myNowCnt=0; // 最初の画像に戻す
}else{ // 最後の画像まで表示していないのなら
myNowCnt++; // 次の画像へ
}
document.myFormImg.src = myImage[myNowCnt]; // 次の画像を表示する
setTimeout( "myChange()" , 6000 ); // ２秒周期に画像を更新する
}
// --></script>

<img src="img/main/f01.jpg" width="900" height="300" name="myFormImg">
<script language="JavaScript"><!--
myChange();
// --></script>

こんな感じでやってみたもののこれではフェードインフェードアウトにはなりません

どこに何を足せばいいのか、または全く違うコードを書けばいいのかどなたかお教えいただけませんでしょうか。
jQueryだと記述はもっと簡単なのでしょうか？

回答No.2

m0a13 · ベストアンサー

<script src="http://code.jquery.com/jquery.js"></script>
<script language="JavaScript"><!--
$(function() {
myImageCnt = 7; // 画像の数
myImage = new Array( // 画像ファイル名の設定
"img/main/f01.jpg",
"img/main/f02.jpg",
"img/main/f03.jpg",
"img/main/f04.jpg",
"img/main/f05.jpg",
"img/main/f06.jpg",
"img/main/f07.jpg"
);
myNowCnt = 0; // 現在表示している画像番号
function myChange(){ // 定期的に画像を更新する関数
if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら
myNowCnt=0; // 最初の画像に戻す
}else{ // 最後の画像まで表示していないのなら
myNowCnt++; // 次の画像へ
}
setTimeout(function() {
$("#myFormImg").fadeOut(2000, function() {
$(this).attr("src", myImage[myNowCnt]);
$(this).fadeIn(2000, function() {
myChange();
});
});
}, 6000); // 6秒周期
}
myChange();
});
// --></script>

<img id="myFormImg" src="img/main/f01.jpg" width="900" height="300">

出がかりをスムーズにしました。
setTimeout()は指定時間後に指定の処理を実行する関数なのでフェードの時間とは関係ありません。
jQueryのfadeIn()、fadeOut()は所要時間を都度設定できます。上記では2秒に設定しています。

さて、最後の画像表示時にリンクを設定したいということですが、それは難易度が上がります。
新たにHTMLの<a>タグを追加し、その表示/非表示をjsで制御しなければならないからです。
また画像にリンク文字を重ねるためにも一工夫必要です。個人的には画像そのものをリンクにするとする方が、実装も楽で使い勝手がいいように思います。
どう実装したいかにもよるので、是非ご自分で試してみてください。
ウェブページを作られているのであればjQueryは覚えておいて損はありませんので、勉強がてらやってみてはいかがでしょうか。

お礼

丁寧なご回答ありがとうございました。
1枚目の画像もゆっくり出てきていい感じになりました。
結局周期は6秒では待ちきれなかったので3秒にして
フェードインは1秒
フェードアウトは2秒にしました。
アウトの後のインまでの暗くなる一瞬が気にはなるものの多分これだったら満足してもらえるのではないかと思います。

ただ、最終画像をリンクさせたい要望はまだ満たされてないのでサンプルページなどの情報も加えて、新規質問で投稿させていただこうかと思います。

JavaScript（JQuery)でFlashのように表現・・・というのはなかなか難しいです^^;;まだまだ勉強しないと!です

本当にありがとうございました。

回答No.1

m0a13

jQueryで動くように書き直しましてみました。

<script src="http://code.jquery.com/jquery.js"></script>
<script language="JavaScript"><!--
$(function() {
myImageCnt = 7; // 画像の数
myImage = new Array( // 画像ファイル名の設定
"img/main/f01.jpg",
"img/main/f02.jpg",
"img/main/f03.jpg",
"img/main/f04.jpg",
"img/main/f05.jpg",
"img/main/f06.jpg",
"img/main/f07.jpg"
);
myNowCnt = 0; // 現在表示している画像番号
function myChange(){ // 定期的に画像を更新する関数
if (myNowCnt == myImageCnt-1){ // 最後の画像まで表示したのなら
myNowCnt=0; // 最初の画像に戻す
}else{ // 最後の画像まで表示していないのなら
myNowCnt++; // 次の画像へ
}
$("#myFormImg").fadeOut(function() {
$(this).attr("src", myImage[myNowCnt]);
$(this).fadeIn(function() {
setTimeout(function() {
myChange();
}, 2000 ); // ２秒周期に画像を更新する
});
});
}
myChange();
});
// --></script>

<img id="myFormImg" src="img/main/f01.jpg" width="900" height="300">

上の例ではjQuery本体はweb上のものを参照しています。
ちなみにjavascriptとjavaは名前が似ているだけで全くの別物なのでご注意ください。

お礼

ありがとうございます！フェードインフェードアウトになりました！
・・・が、1枚目の画像は始めて読み込んだ直後はすごく大急ぎで表示されて消えてしまいます。読み込んでいる時間も6秒の中にカウントされているのでしょうか。
ということはもっと早くこの画像を読み込ませるようにしないといけないということでしょうか・・・？

全体的に2秒は早かったので6秒に変えたのですが他の画像ももう少しゆっくりイン、アウトって出来ないものなのでしょうか。。

あと、最後の7の画像に表示されている”詳しくはこちら”という文字をクリックしたら、指定のページへリンクされるようにするには
"img/main/f07.jpg"
の場所に何かを書き足せばいいのでしょうか？

もし何かいい方法があるようでしたらご教授いただけないでしょうか？

追加で申し訳ありませんがよろしくお願いいたします。