- ベストアンサー
【jQuery】setIntervalの使い方と初心者向けのクロスフェードのコード
- jQueryを初めて使う初心者の方に向けて、setIntervalの使い方とクロスフェードのコードを解説します。
- 3つの画像を3秒間隔でクロスフェードさせる方法や、setIntervalとsetTimeoutを組み合わせたコードの書き方を紹介します。
- 初心者の方でも理解しやすいようにシンプルなコード例を提示しています。
- okogedesuga
- お礼率68% (15/22)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こうすれば出来ますよ。 $(function(){ $('p').css({display:'block',position:'absolute'}); $(".photo-2").fadeOut(0); $(".photo-3").fadeOut(0); // setIntervalは、設定した時間後に内部の処理を呼び出すので // ここで1回目を明示的に呼び出し photoFade(); setInterval(function(){ // setInterval関数で後は自動呼出し photoFade(); },9000); }); function photoFade() { setTimeout(function(){$(".photo-1").fadeOut(1000);},3000); setTimeout(function(){$(".photo-2").fadeIn(1000);},3000); setTimeout(function(){$(".photo-2").fadeOut(1000);},6000); setTimeout(function(){$(".photo-3").fadeIn(1000);},6000); setTimeout(function(){$(".photo-3").fadeOut(1000);},9000); setTimeout(function(){$(".photo-1").fadeIn(1000);},9000); } 初心者レベルが良く分かりませんが、okogedesugaさんのソースをほぼ修正しないで望む動作が実行可能な状態へ持っていくことと捉えました。 処理はかなり変わりますが、こういうやり方もあります。 $(function(){ $('p').css({display:'block',position:'absolute'}); $(".photo-2").animate({opacity:0}, 0); $(".photo-3").animate({opacity:0}, 0); setInterval(function () { $('div.photo-box').find('p:first-child') .animate({opacity:0}, 1000) .next('p') .animate({opacity:1}, 1000) .end().appendTo($('div.photo-box')); }, 3000); }); 動きはこんな感じ １．divタブのcassがphoto-boxの中でpタグを検索し、一番初めのpタグの要素の情報を返す $('div.photo-box').find('p:first-child') ２．1番目の画像を不可視化 .animate({opacity:0}, 1000) ３．2番目のpタグの情報を取得 .next('p') ４．2番目の画像を可視化 .animate({opacity:1}, 1000) ５．2番目の情報を破棄し、1番目の情報を取得しなおす .end() ６．divタブのcassがphoto-boxの最後に1番目の情報を移動 .appendTo($('div.photo-box'));
その他の回答 (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番目(最後)の画像を 表示して止めるのは、大幅な変更になるのでしょうか？ お手数ですが宜しくお願いします。