スライド写真で２、３枚目をランダムで表示させるには

解決済

質問者：soapon
質問日時：2012/02/10 14:18
回答数：1件

bgSwitcherを使用してフェードインアウトするスライドショーを作りました。
[A固定]→[Bランダム]→[Bランダム]→[C固定]
１枚目、４枚目は指定画像に差替え表示できていますが、
２枚目、３枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。

【実現したいこと】
●imgBをランダム読み込みし、２枚目、３枚目で同じ画像が選ばれないようにしたい
●2巡目以降も、再生のたびにランダム処理を実施する

どなたか、上記のものが実現できるように出来ないものでしょうか。
どうぞよろしくお願いいたします。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.bgSwitcher.js" type="text/javascript"></script>
<script language="javascript">

</script>
<style type="text/css">
.bg {
width: 160px;
height: 160px;
padding: 20px;
line-height: 1.6;
}
</style>
</head>
<body>
<div>
<div id="bgSwitch-fadeOut" class="bg">
<p>テキスト</p>
</div>
</div>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： LancerVII
回答日時：2012/02/10 15:32

こんにちは。

>●imgBをランダム読み込みし、２枚目、３枚目で同じ画像が選ばれないようにしたい
これについては最初渡すときのランダム変数が同じなのが原因ですので

var n1 = Math.floor(Math.random()*imgB.length);

while ( true ) {
var n2 = Math.floor(Math.random()*imgB.length);
// n1とn2がちがっていればループ終了　同じの場合はもう一度ランダム実行
if ( n1 != n2 )
break;
}
var ctrl = $('#test').bgSwitcher ({
images : [ imgA, imgB[n1], imgB[n2], imgC ],
interval : 1000,
fadeSpeed : 1000,
},true ).data('bgSwitcher');
にすれば違う画像が表示されます。

>●2巡目以降も、再生のたびにランダム処理を実施する
についてはjquery.bgWeitcher.jsというプラグインをカスタマイズする必要があります。
プラグインの中を見ましたが現状は最初に渡された画像のみを使用し、途中で画像を書き換えることを考慮していないようです。