- ベストアンサー
jQuery Cycle Pluginで4枚の画像をフェードで切り替える方法と表示時間を変える方法は？
- jQuery Cycle Pluginを使用して、4枚の画像をフェードで順に切り替える方法を教えてください。また、各画像の表示時間を個別に変更する方法も知りたいです。
- フェードの速度（speed）は一定で構いませんが、各画像の表示時間（timeout）をそれぞれ設定したい場合、他の方法を教えてください。
- Cycle Pluginにこだわらない他の方法で、4枚の画像をフェードで切り替えつつ、各画像の表示時間を個別に設定する方法を教えてください。
- yaku-ima
- お礼率84% (16/19)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
よくわかってませんが、 こんな感じ？（全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- #target { position:relative; } #target img { position:absolute; top:0; left:0; } //--> </style> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript"> <!-- $(function(){ var imgdata = [ [2000,"img/photo02.jpg"], [5000,"img/photo03.jpg"], [3000,"img/photo04.jpg"] ]; var count=0; setTimeout(change, imgdata[count][0]); function change(){ var t = $("#target"); var img = $("img:first", t) img.clone().appendTo(t).fadeOut(1000, function(){ $(this).remove(); }); img.attr("src", imgdata[count++][1]); if(imgdata[count]) setTimeout(change, imgdata[count][0]); } }); //--> </script> </head> <body> <div id="target"> <img src="img/photo01.jpg" alt=""> </div> </body> </html>
お礼
お礼が遅くなってしまい申し訳ありません。 書かれている方法で問題なく制御できました。 本当に助かりました。ありがとうございました。