スライド写真で２、３枚目をランダムで表示させるには
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">
<!--
// JavaScript Document
var imgA = ["images-top/A.jpg"],
imgC = ["images-top/C.jpg"];
imgB = new Array();
imgB[0] = "images-top/B1.jpg";
imgB[1] = "images-top/B2.jpg";
imgB[2] = "images-top/B3.jpg";
imgB[3] = "images-top/B4.jpg";
imgB[4] = "images-top/B5.jpg";
n = Math.floor(Math.random()*imgB.length);
jQuery(function($) {
$('#bgSwitch-fadeOut').bgSwitcher({
images: [imgA, imgB[n], imgB[n], imgC],
interval: 1000,
fadeSpeed: 1000,
}, true);
})
-->
</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>
お礼
ご回答ありがとうございます。 恥ずかしながらそういうスタイルシートがあることを初めて知りました…。なんだかうまくいきそうです！ とても助かりました。ありがとうございます。 やってみてどうしてもうまくいかなかったらまた質問投稿させて下さい。ありがとうございました。