画像をランダムで表示するjavascript

Tweet

昔やっていたブログで、毎回別の画像を表示してユーザに新鮮さを与えるために利用していました。
こちらを参考にしました。

【javascript】webページに画像をランダムに（重複しないように… – 人力検索はてな
http://q.hatena.ne.jp/1202909655

■画像をランダムで表示するjavascript

少ない画像をランダムで表示させる場合はHTMLに直接書き込めば良いですが、
10枚以上などの多い場合は外部ファイルとして読み込むことをおすすめします。

画像は昔ブログで利用していた時のものです（フィギュアブログ）。
画像だけでなく文字も一緒に表示することができるのも良いところの一つです。

■実装手順

1. 任意のテキストエディタを開いて、以下のような記述をする
   jsの記述

   Default

   var randObjects=[ '<a href="URL"><img src="URL"></a>', '<a href="URL"><img src="URL"></a>', '<a href="URL"><img src="URL"></a>' ]; function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr,rr+1)[0]); randObjects.splice(rr,1); }

   1 2 3 4 5 6 7 8 9 10 11

   var randObjects=[ '', '', '' ];   function randWrite() { var rr = parseInt(Math.random() * randObjects.length); document.write(randObjects.slice(rr,rr+1)[0]); randObjects.splice(rr,1); }

   ※画像と一緒に文字を入れたい場合はpタグを使う。

2. 画像をランダムで表示させたい場所に、表示させたい数だけ以下のコードを記述する
   htmlの記述

   Default

   <script type="text/javascript">randWrite1()</script>

   1

    

実装手順は以上になります。至って簡単でわかりやすいと思います。
形はブサイクかもしれませんが、jsがよく知らなくてもできるということで私はお世話になりました。

何か質問、誤情報、誤字などがあればコメントでお願いします。

Tweet