マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > デザイン > 【超簡単】JavaScriptで画像をランダムに表示する方法

Mighty Ace Blog

マイティーBlog

デザイン

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アナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.