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});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/18 04:31