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

Webサイト作成 TIPS
Javascript

Webサイト作成時、Javascriptでランダムに違う画像を表示する方法です。
例えば、imageフォルダにある、image1,image2,image3をランダムに表示する場合。
JavascriptがOFFにされている場合を考えて、内へ、OFFの場合の画像(image4)を表示します。


 <script type="text/javascript">
 <!--
 //JavascriptがONがOFFか判定をします。OFFだったら実行しません。
 if (document.images)
 {
 var msg = new Array(); 
 msg[1] = '<IMG SRC="image/image1.png" ALT="">'; 
 msg[2] = '<IMG SRC="image/image2.png" ALT="">'; 
 msg[3] = '<IMG SRC="image/image3.png" ALT="">'; 
 //1から3までの整数が、ランダムにnoになります。(詳細は後述)
 var no=Math.round(Math.random()*3+0.5);
 document.write(msg[no]); 
 }
 //-->
 </script>
 <noscript>
 <img src="image/image4.png" alt="">
 </noscript>

 var no=Math.round(Math.random()*3+0.5);

については、色々なやり方があると思います。ここが参考になります。
http://www.adobe.com/jp/support/flash/ts/documents/fl0173.html

 var no=Math.floor(Math.random()*3+1);

とかでもいいと思います。Math.floorは小数点以下を切捨てします。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です