デザイン
2021.03.04
【超簡単】JavaScriptで画像をランダムに表示する方法
「画像をランダムに表示するスクリプト」を作ってみました。
imagesフォルダ内に0.jpg～4.jpgという5枚の画像を用意します。
画像のランダム表示のみ
表示するだけなら超簡単！
サンプルコード
<script>
num = 5; //画像の枚数
r = Math.floor(Math.random()*num);
document.write('<img src="images/'+r+'.jpg" />');
</script>numには画像の枚数を入れておきます。ファイル名を0から始まる連番にしなくてはいけません。
リンク付きのランダム画像表示
次にランダム表示された画像それぞれにリンクを付けてみます。
<script>
num = 5;
r = Math.floor(Math.random()*num);
link = new Array();
link[0] = "http://aaaa.com"; //0.jpgのリンク先
link[1] = "http://bbbb.com"; //1.jpgのリンク先
link[2] = "http://cccc.com"; //2.jpgのリンク先
link[3] = "http://dddd.com";//3.jpgのリンク先
link[4] = "http://eeee.com";//4.jpgのリンク先
document.write('<a href="'+link[r]+'" target="_blank"><img src="images/'+r+'.jpg" /></a>');
</script>
まとめ
これでけっこう実用的になったんじゃないでしょうか？ショッピングサイトの商品紹介リンクに使えそうじゃないですか？
とりあえずこれで終了ですが、もっとスマートな書き方があるかもしれません。そこはJavaScript初心者なので大目に見てください…
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
