スライドショーにフェード効果と再ランダム表示を…

解決済

質問者：soapon
質問日時：2012/02/16 15:29
回答数：1件

前回、重複しない画像選びを教えて頂き、その後の続きを頑張ってみましたが
策が尽きてしまいました。皆様のお力をお借りできないでしょうか。
【※現在の状況】
・[A]→[B1]→[B2]→[C]の順番で再生
・[A] [C]は固定（指定）画像を表示、[B1] [B2]はB1～5.jpgの中からランダムに表示し、重複選択を回避しています。

上記にさらに下記機能をプラスしたいと思っております。
【実現したいこと】
・クロスフェード（またはフェードイン、アウト）を実装したい。
・初回再生時にランダムで取得した画像を、リピート再生時にもう一度ランダム読込み表示させたい。

形式は上記内容を踏まえた物であれば、まったく違うものになっても構いません。
どうか助けて頂けないでしょうか。よろしくお願い致します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SLIDESHOW</title>
<script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery …
<script type="text/javascript" src="http://medienfreunde.com/lab/innerfade/js/jquery …
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</head>
<body onload="img_move()">
<div>
<img src="images/A.jpg" name="show" width="300" height="250" >
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/02/16 16:17

こんにちは。

この前の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;
}
});

- 0
- 件

通報する

この回答へのお礼

LancerVIIさま
前回の質問から気にかけていただいていたなんて・・ありがとうございます。
bgSwitcherを使えたら一番の理想型だったので大変感激です！
ついに完成いたしました（涙）

あれからいろんなJSを探してみたり、本を買って読んでみたりしていたのですが
やはりどうしてもうまくいかず、再度投稿することになってしまったのです。
※でも副作用効果でJSプログラムに馴染めることが出来ました＾＾

重ねてお礼申し上げますが、貴重なお時間を使って頂き本当にありがとうございました！！

通報する

お礼日時：2012/02/17 09:49

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！