- ベストアンサー
【jQuery】setIntervalの使い方と初心者向けのクロスフェードのコード
- jQueryを初めて使う初心者の方に向けて、setIntervalの使い方とクロスフェードのコードを解説します。
- 3つの画像を3秒間隔でクロスフェードさせる方法や、setIntervalとsetTimeoutを組み合わせたコードの書き方を紹介します。
- 初心者の方でも理解しやすいようにシンプルなコード例を提示しています。
- okogedesuga
- お礼率68% (15/22)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- fujillin
- ベストアンサー率61% (1594/2576)
「.photo-1」のように個別に指定していると、画像数が増減したりする度にスクリプトを書き直さなければならなくなります。 『div内の子要素を順に表示する』みたいな考え方に切り替えることで、汎用性を増すことができるのではないでしょうか？ 以下、一例です。 （全角空白は半角に） <!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"> #photo-box{ position:relative; } #photo-box p{ position:absolute; top:0; left:0; } #photo-box img{ width:500px; height:150px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var ImageChanger = function(id, fadeSpeed, interval){ var index = 0; var imgs = $(id).children(); var exchange = function(){ imgs.eq(index++).fadeOut(fadeSpeed); index %= imgs.length; imgs.eq(index).fadeIn(fadeSpeed); } imgs.filter(":gt(0)").hide(); setInterval(exchange, interval); } ImageChanger("#photo-box", 1000, 3000); }); </script> </head> <body> <div id="photo-box"> <p><img src="img/photo01.jpg" alt=""></p> <p><img src="img/photo02.jpg" alt=""></p> <p><img src="img/photo03.jpg" alt=""></p> <p><img src="img/photo04.jpg" alt=""></p> </div> </body> </html>
お礼
fujillinさん ご回答ありがとうございます。 拝見させて頂いたところ、私にはレベルが高すぎて 解読するにはもう少し時間が掛かりそうです…。 ですが、『div内の子要素を順に表示する』を課題に fujillinさんのソースにあった、gt(0)が私にも出来そうだったので cero_dさんのソースと合わせてみました。 $(function(){ $("#photo-box p:gt(0)").hide(); setInterval(function(){ $("#photo-box").find("p:first-child") .fadeOut(1000).next("p") .fadeIn(200).end().appendTo("#photo-box"); },5000); }); どうやってシンプルで効率的にするかを考える 勉強になりました。 今回のご回答は、もう少し勉強してレベルアップしてから 参考にさせて頂きます。 ありがとうございました。
お礼
cero_dさん ２パターンもありがとうございます。 私のソースを利用したもので photoFade();やfunction photoFade() {...}は jqueryなのでしょうか？ 私が知らないだけかもしれませんが 書き方がjqueryと少し違うように見えたので。 2つ目のソースは、大変勉強になりました。 animateのopaccityでも同じような表現が出来るのですね。 まだしっかりと理解していませんが、部分的に変えたりして勉強しております。 ちなみに、繰り返しはせず3番目(最後)の画像を 表示して止めるのは、大幅な変更になるのでしょうか？ お手数ですが宜しくお願いします。