- ベストアンサー
画像群の中でランダムに画像が入れ替わるには？
よろしくお願い致します。 http://goodsfan.jp/top.aspx の最上部の大きい画像の直下に７列✕４段の正方形の画像群があるのですが、一定時間が経つとランダムに選ばれた画像群の中のひとつの画像をフェードイン・アウトで別の画像に切り替えています。 これを実現する方法、もしくはソースコードをご存知の方がいらっしゃいましたらご教授頂けないでしょうか。 jQueryを使用する方法をご教授頂けると尚助かります。 勝手な質問で申し訳ありませんが、どうぞよろしくお願い致します。
- yama_no_uchi
- お礼率75% (6/8)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 あまり綺麗なコードでは無いと思いますが取り急ぎ。 あとはカスタマイズしてみてください。 $().ready(function() { var randArray = new Array(); var max = $('ul li').length; for ( var i = 0; i < max; i ++ ){ randArray.push ( i ); } randArray.shuffle(); var loop = 0; var timer = window.setInterval ( function() { // 任意のliを取得 var $li = $('ul li:eq('+randArray[loop++]+')'); // 画像1を取得 var $img1 = $li.find('img:eq(0)'); // 画像2を取得 var $img2 = $li.find('img:eq(1)'); // srcを取得しておく var src1 = $img1.attr('src'); // srcを取得しておく var src2 = $img2.attr('src'); // 画像1をフェードアウトし、画像1に画像2をフェードインする $img1.fadeTo(1000,0,function() { $img1.attr('src',src2); $img1.fadeTo(1000,1); }); // 画像2をフェードアウトし、画像2に画像1フェード印する $img2.fadeTo(1000,0,function() { $img2.attr('src',src1); $img2.fadeTo(1000,1); }); if ( loop > max ) { // すべてのli要素分のループで停止 clearInterval ( timer ); } },5000 ); }); // 重複しない乱数を生成 Array.prototype.shuffle = function() { var i = this.length; while ( i ) { var j = Math.floor(Math.random()*i); var t = this[--i]; this[i] = this[j]; this[j] = t; } return this; }
その他の回答 (1)
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 下のようなイメージで出来ると思います。 $().ready ( function() { // とりあえず5秒間隔で繰り返す window.setInterval ( function() { // 表示されている画像の枚数6 var rndIndex = Math.floor(Math.random()*6); // imgarea内のimgのrandIndex番目の画像に対して1秒で透明になるように設定し、 // 透明になったあとに(rndImage).pngの画像を300ミリ秒で不透明になるように設定 $('#imgarea img:eq('+rndIndex+')').fadeTo(1000,0,function() { // 用意してある画像の枚数18 var rndImage = Math.floor(Math.random()*18); $(this) .attr('src',rndImage+'.png') .fadeTo(300,1); }); }, 5000); }); 上記スクリプト用に用意したHTMLはこんな感じ <div id="imgarea"> <ul> <li><img src="1.png" width="48" height="48" alt="1.png"></li> <li><img src="2.png" width="48" height="48" alt="2.png"></li> <li><img src="3.png" width="48" height="48" alt="3.png"></li> </ul> <ul> <li><img src="4.png" width="48" height="48" alt="4.png"></li> <li><img src="5.png" width="48" height="48" alt="5.png"></li> <li><img src="6.png" width="48" height="48" alt="6.png"></li> </ul> </div>
補足
ご回答下さりありがとうございます！ 私の書き方が不明瞭で申し訳ありません。 下記が実現したい内容になります。 ・「ul」の中にある「li」をランダムにひとつ選び、その「li」の中にある２枚の画像をフェードイン・アウトで入れ替える ・「li」は動的に増減するので、jQueryで「li」の数を取得する ・できれば、一度選ばれた「li」は次のランダム選出候補から外す ■基本のソースコードです <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <style> ul { margin: 0; padding: 0; } li { float: left; width: 100px; height: 100px; list-style-type: none; position: relative; } li img { width: 100px; height: 100px; position: absolute; left: 0; top: 0; } </style> </head> <body> <ul> <li> <img src="01.jpg"> <img src="02.jpg"> </li> <li> <img src="03.jpg"> <img src="04.jpg"> </li> <li> <img src="05.jpg"> <img src="06.jpg"> </li> <li> <img src="07.jpg"> <img src="08.jpg"> </li> <li> <img src="09.jpg"> <img src="10.jpg"> </li> </ul> </body> </html> もしお手数でなければ、ご教授頂ければ幸いです。 どうぞよろしくお願いいたします。
お礼
ありがとうございます！ お教え頂いたコードで動きました！ 勝手な希望にお付き合い頂き、本当にありがとうございました。