bgSwitcherを使用してフェードインアウトするスライドショーを作りました。
[A固定]→[Bランダム]→[Bランダム]→[C固定]
1枚目、4枚目は指定画像に差替え表示できていますが、
2枚目、3枚目が同じ画像を表示してしまい、繰り返し再生しても再度ランダムに選んでくれず、初めに読み込んだ画像のままでした。
【実現したいこと】
●imgBをランダム読み込みし、2枚目、3枚目で同じ画像が選ばれないようにしたい
●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>
No.1ベストアンサー
- 回答日時:
こんにちは。
>●imgBをランダム読み込みし、2枚目、3枚目で同じ画像が選ばれないようにしたい
これについては最初渡すときのランダム変数が同じなのが原因ですので
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というプラグインをカスタマイズする必要があります。
プラグインの中を見ましたが現状は最初に渡された画像のみを使用し、途中で画像を書き換えることを考慮していないようです。
早々にご回答頂きましてありがとうございます。大変感謝感激です!
振り分けのほうだけでも分かって本当に嬉しいです。
リピートのほうについては、別プラグインを探してみようと思います。
ほんとうにどうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ボタンを押したあとに画像を表...
-
スマホ上で、左右スワイプで次...
-
ラジオボタンを複数選択したと...
-
jsonテキストデータの並び替え...
-
Adobe acrobat proでフォームを...
-
画面に表示したらアニメーショ...
-
2025年相性がいい人のサイトの...
-
jQueryでのレスポンシブが綺麗...
-
jsで質問です。 formをsubmitし...
-
二次元配列を使って順位をだす...
-
【JS】selectでchangeした時の...
-
sessionStorageを調べています。
-
jsで質問です。 ボタンが二つ存...
-
ブックマークレットについて
-
タグを教えてください。
-
CookieをWebStoeageに変える
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのcolorboxを読込直後に...
-
サイトにアクセスした際、数秒...
-
jquery ui.resizable 使い方
-
base64encodeでの文字化けについて
-
スライド写真で2、3枚目をラ...
-
jQuery が動作しません。
-
jQueryと他のライブラリを同時...
-
マスターページでのJavaScriopt...
-
jquery select要素のdisplay:no...
-
jqeryのslicksliderのパスにつ...
-
javascriptとjuaryを同時に
-
Javascriptのエラーに悩まされ...
-
<div>のタッチ状態を維持したま...
-
javascript 引用符
-
JavaScriptで背景や文字色を色→...
-
jqueryとlightboxが一緒に動作...
-
Base64に変換したHTMLの<script...
-
jQueryBlockUIをフレーム内で動...
-
mootoolsとjQueryの共存がうま...
-
ヤフーのジオの広告のような技法
おすすめ情報
