Javascriptista

画像をランダムに切り替えます。これは配列とRandomクラスを使用すれば簡単にできます。

SAMPLE

解説

---

<script language="javascript" type="text/javascript">

var imgPaths = new Array();
imgPaths.push('./img/0142-650x435.jpg');
imgPaths.push('./img/0158-650x435.jpg');
imgPaths.push('./img/0177-650x435.jpg');
imgPaths.push('./img/0142-650x435.jpg');
imgPaths.push('./img/0007-650x435.jpg');


onload = function(){
  //初回実行
  showPicAtRandom();
 
  //2回目以降は、ボタン押されるたびに実行
  document.forms['testForm'].elements['testButton'].onclick = showPicAtRandom;
}

function showPicAtRandom(){
  //ランダムに値を生成する。
  var index = Math.floor(Math.random() * imgPaths.length);
 
  //randome関数に「1」を含むブラウザがある可能性も否定できない状況なので、チェック
  index = (index >= imgPaths.length)?(imgPaths.length - 1):index;
 
  document.getElementById('targetImg').src = imgPaths[index];
}
</script>

---

・フィールド変数(imgPaths)
表示する画像候補を配列化しています。Arrayオブジェクトであれば、pushはとても便利です。後からいくつでも増やせますし、ミスしません

・onload
HTML読み込み完了後に実行されます。
画面表示時にshowPicAtRandomを実行しています。以後は、更新ボタンを押されるたびに実行されます。

・showPicAtRandom
0以上1未満の乱数を作成し、配列の数を積算して小数点を切り捨てるとランダムなINDEX値がとれます。方程式のように覚えてしまっています。
Math.randomですが、標準は「0以上1未満」です。ただブラウザによっては、解説で「0以上1以下」というのが散見するので、念のため、配列INDEXを超えた場合は、配列INDEXに収まるようにしています。

---

画像素材は http://0501file.com/  よりお借りいたしました。
どうもありがとうございます。