- ベストアンサー
スライドショーにフェード効果と再ランダム表示を実装したい
- スライドショーにフェード効果と再ランダム表示を実装したい。重複選択を回避しつつ、クロスフェードやフェードイン・アウトを利用したい。初回再生時にはランダムに取得した画像を表示し、リピート再生時にもう一度ランダムに画像を読み込んで表示させたい。
- 現在の状況は、[A]→[B1]→[B2]→[C]の順番で再生している。[A]と[C]は固定の指定画像を表示し、[B1]と[B2]はB1～5.jpgの中からランダムに表示している。重複選択は回避している。
- 上記の状況にさらに、クロスフェードやフェードイン・アウトを実装したい。初回再生時にはランダムに取得した画像を表示し、リピート再生時にもう一度ランダムに画像を読み込んで表示させたい。HTMLのスクリプト内でこれらの要件を実現するための処理が記述されている。
- soapon
- お礼率100% (3/3)
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 この前のbgSwitcherを使ったものであればランダム画像の初期化ができるように作ってみました。 前回ファイル等準備していたら締切に間に合わなかったのでうまく行ったか気になっていました。 これでイメージとあっているなら使ってやってください。 動作サンプルの一番下からカスタマイズ後のjquery.bgSwitcher.jsがダウンロードできます。 ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7308681/ プラグインを以下のようにちょっとカスタマイズしました。 最後の画像まで選択され、最初に戻る前にcallbackReset関数を呼ぶようにカスタマイズ。 callbackReset関数内で再度画像をランダムに呼出してsetImagesを呼ぶことにより画像を変更する。 ==== JS部分 $().ready ( function() { var imgA = './images/samplea.png'; var imgC = './images/samplec.png'; var imgBs = new Array(); imgBs[0] = './images/sample1.png'; imgBs[1] = './images/sample2.png'; imgBs[2] = './images/sample3.png'; imgBs[3] = './images/sample4.png'; imgBs[4] = './images/sample5.png'; var imgB = setImgB(); var ctrl = $('#test').bgSwitcher ({ images : [ imgA, imgB[0], imgB[1], imgC ], interval : 1000, fadeSpeed : 1000, callbackReset : function() { // 画像を再設定(プラグイン内からの呼び出し) // 引数は画像パス配列と変更したいindex // この場合は1,2番目の画像を入れ替える // setImgB()はランダムに抽出した2枚分の配列を返してくる関数 ctrl.setImages ( setImgB(), new Array(1,2) ); } },true ).data('bgSwitcher'); function setImgB() { var imgs = new Array(); var n1 = Math.floor(Math.random()*imgBs.length); while ( true ) { var n2 = Math.floor(Math.random()*imgBs.length); if ( n1 != n2 ) break; } imgs[0] = imgBs[n1]; imgs[1] = imgBs[n2]; return imgs; } });
お礼
LancerVIIさま 前回の質問から気にかけていただいていたなんて・・ありがとうございます。 bgSwitcherを使えたら一番の理想型だったので大変感激です！ ついに完成いたしました（涙） あれからいろんなJSを探してみたり、本を買って読んでみたりしていたのですが やはりどうしてもうまくいかず、再度投稿することになってしまったのです。 ※でも副作用効果でJSプログラムに馴染めることが出来ました＾＾ 重ねてお礼申し上げますが、貴重なお時間を使って頂き本当にありがとうございました！！