質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1705閲覧

スライドショーで最初の1枚だけランダムで表示してそこからは画像の番号順にスライドさせたい

hiro421

総合スコア63

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/10/18 03:39

https://vegas.jaysalvat.com/
こちらを使用してスライドショーをつくっています。

機能の中でshuffleという機能はあるのですが、これだと全てシャッフルしてしまって希望する挙動になりませんでした。

他の参考記事を探して一応、下記のようにすればshuffleという機能を使わなくてもシャッフルして表示されるようにはなりました。
ただこれだと全てシャッフルされてしまいます。

このfunction shuffleという関数を変えれば上手くいきそうな気もするのですが、知識が乏しく。。。

希望の挙動としては
・アクセスした際、下記の配列からランダムで1枚目を表示
・そこからは画像の番号順にスライド
・例えば最初の画像がmain02.jpgなら
main02.jpg → main03.jpg → main04.jpg → main05.jpg → main06.jpg → main01.jpg → ループ

ご教授いただけますと大変助かります。
よろしくお願いいたします!

html

1<div id="mainvisual"> 2 <ul class="slides"> 3 <li></li> 4 </ul> 5</div>

javascript

1$(function () { 2 function shuffle(o) { 3 for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); 4 return o; 5 }; 6 var bgimages = [{ 7 src: 'images/mainvisual/main01.jpg'}, { 8 src: 'images/mainvisual/main02.jpg'}, { 9 src: 'images/mainvisual/main03.jpg'}, { 10 src: 'images/mainvisual/main04.jpg'}, { 11 src: 'images/mainvisual/main05.jpg'}, { 12 src: 'images/mainvisual/main06.jpg' 13 }] 14 randombgs = shuffle(bgimages); 15 $('#mainvisual .slides').vegas({ 16 transition: 'blur', 17 transitionDuration: 2000, 18 delay: 6000, 19 timer: false, 20 loop: true, 21 shuffle: false, 22 slides: randombgs     23 }); 24});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ここに初期化に渡すコンフィグの一覧があります。
http://vegas.jaysalvat.com/documentation/settings/
ここには以下のパラメータがあると書かれています。

|OPTION|DEFAULT|DESCRIPTION|
|--|--|
|slide|0|Index number of initial slide.|

最初のスライドを番号で指定できるようですね。あなたの要望では最初のスライドがランダムであって、後は順番通りとのことですので、このslideさえランダムで決めてしまえばよいかと思います。

javascript

1var bgimages = [{ 2 src: 'images/mainvisual/main01.jpg'}, { 3 src: 'images/mainvisual/main02.jpg'}, { 4 src: 'images/mainvisual/main03.jpg'}, { 5 src: 'images/mainvisual/main04.jpg'}, { 6 src: 'images/mainvisual/main05.jpg'}, { 7 src: 'images/mainvisual/main06.jpg' 8}] 9$('#mainvisual .slides').vegas({ 10 transition: 'blur', 11 transitionDuration: 2000, 12 delay: 6000, 13 timer: false, 14 loop: true, 15 shuffle: false, 16 slides: bgimages, 17 slide: Math.floor(Math.random() * bgimages.length) 18 });
  1. Math.random()は0~1未満の範囲の小数で乱数がとれます
  2. bgimages.lengthでスライドの枚数分掛け算することで0~6未満の小数になるようにします
  3. Math.floor()で小数点以下を切り捨てて0〜5の整数をランダムで取得します

投稿2017/10/18 04:22

編集2017/10/18 04:25
masaya_ohashi

総合スコア9206

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiro421

2017/10/18 04:31

ありがとうございます!! 希望する挙動になりました!!
guest

0

適当なデータで頭出しをしてから再ソート

javascript

1var a=["01","02","03","04","05","06"]; 2var start=(a.sort(function(x,y){return Math.random()<0.5;}))[0]; 3console.log(start); 4var b=Array.concat( 5 a.filter(function(x){return x>=start;}).sort(function(x,y){return x>y;}), 6 a.filter(function(x){return x<start;}).sort(function(x,y){return x>y;}) 7 ); 8console.log(b);

投稿2017/10/18 04:31

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問