今回はJavaScriptとJQueryを使用してホームページやブログなのでよく見かける、重複しないランダムな画像の切り替え処理のデモを実施してみたいと思います。
【完成後】
1秒間隔でランダムな画像に切り替わります(*^^)v
画像が表示されない場合はCtrl + F5 キー押してみてください。
それではいってみましょう(*ﾟ▽ﾟ)ﾉ
Menu
作成手順
・5つの画像を使用します。
・imgタグをHTMLに追加します。
・5つの画像を乱数でランダム化します。
・5つの画像を重複なしのデータに編集して配列に格納します。
・ランダム化した重複しない5枚の画像を1秒ごとに表示させます。
サンプルコード
HTMLサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="jn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-1.8.3.js"></script> <title>重複しない画像を一定時間で画面切り替え</title> </head> <body> <div class="imgTest"> <!--ここにimgが追加されます--> </div> </body> </html> |
JavaScript/JQueryサンプル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <script type="text/javascript"> //➀// $('<img src="">').prependTo('.imgTest'); //➁// let png1 = "111.png"; let png2 = "222.png"; let png3 = "333.png"; let png4 = "444.png"; let png5 = "555.png"; //➂// let srcAry = [png1, png2, png3, png4, png5]; console.log(srcAry); //➃// let addAry = []; //➄// $.each(srcAry, function() { //➅// let rndInt = Math.floor(Math.random() * srcAry.length); console.log(srcAry[rndInt]); //➆// let addAryLength = addAry.unshift(srcAry[rndInt]); //➇// let srcAryLength = srcAry.splice(rndInt, 1); }); console.log(addAry); //➈// let i = 0; setInterval(function() { //➉// if (i === addAry.length) { i = 0; } //⑪// $('.imgTest > img').attr('src', addAry[i]); // console.log(i++); }, 1000); </script> |
解説
➀HTMLのimgTestクラスの子の先頭に<img src=””>を追加します。（prependTo）
➁画像のパスを変数に格納します。
➂画像の配列を作成しておきます。
➃ランダム画像を1枚ずつ別の配列に追加格納するために、空の配列（最後にこの配列addAryを昇順で表示させていきます）を作成しておきます。
➄JQueryのeachメソッドの繰り返し処理で重複なしのランダムな順番の配列を作成していきます。
➅配列数だけ整数の乱数を作成し1回ループするごとにspliceメソッドで要素が1つ削除されるのでsrcAry.lengthは-1ずつ減っていきます。
➆配列addAryの先頭にunshiftメソッドでsrcAryの乱数で作成された要素を追加していきます。
➇spliceメソッドの要素を1つ削除します。
➈ここから画面に表示させていきます。setIntervalで1秒ごとに画像を入れ替える処理をします。
➉ifで変数iが配列数とイコールになったら変数iを0に戻し、ランダムに並び替えられた画像の配列を今度は昇順で表示させていきます。
⑪imgSampleクラスの子要素のimg要素のsrc属性の値をattrメソッドで配列の要素（画像パス）を設定します。
【今回使用した5枚の画像】
【完成後】
重複しない画像が1秒ごとにランダムに表示されます＼(^^)／
ブラウザの更新ボタンかF5キー（リロード）で更新するたびに、新しい乱数でランダムな画像の順番に並び変わります。
まとめ
今回は重複しないランダムな画像で画面切り替えを実行してみましたが、前回の画像切り替えは昇順で表示するやり方だけだったので、重複を意識しなくてよかったので簡単でした。
今回は重複させないための処理が入ったので、その分の重複処理が若干難易度が高かった為、コードも長くなってしまいましたネ。
あとはJQueryのフェードやスライドなどの動作を付加していけば、見栄えもよくなってプロみたいな感じで表示もできてくると思います。
この機会に是非ホームページやブログなどに画像切り替えの処理をして派手にかっこよく表示してもらえたら幸いです(o^^o)
以上です。
画像切り換え関連
JavaScript/jQuery
その他、下記の記事も関連した記事になりますので是非参考にしてみてください！
