JavaScript - ブラウザオブジェクトモデル(タイマーで自動スライドショー(setInterval, clearInterval))

初めてのJavaScript 第2版
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5) の9章(ブラウザオブジェクトモデル)練習問第9-3を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)

9-3.

コード(TextWrangler)

<script>
var pics = [
  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhCW5fEYRe7F3U-lYN3aHSAyqytH3PgPMm8EUQoVTIvdUe4Qp5AQDb1SZ7JG9Wsd6YDkNfL_T023sO4SvY9NPbpDW14Z-dSfz4ER15q3bLK8zV9QY69NfBGOOoLg1krtcB9Z4bK0avEG8Z/w313-h313-n-k/drawing.png",
  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRiuOuV902gnZ2HQuMdH2zS-7QopFCxFsDZxOV7fM9EXB_M-wKJGyZ6b2OlKp-z-h1CAlpH2FooMMfb9neEm7x8W5cnxuq_zjA5t8mkDtTEC78iE9vVmfh_EYZ6ZlyivclWWoLN4vd7CDh/w314-h313-n-k/drawing.png",
  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KTPIEdws8eTmcUltHE-BpuNF8woXT5lHr8pEMCcE_Mw6K7O0a4ocAb-W68rTQAjd_tGpxIFC2fb-vOn_WqbaU7aFv0DhHjppqNu6ja0E1hwS6SSbQWOqxPZ_e2UEpFG8dYZSpImgnMbx/w314-h313-n-k/drawing.png",
  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfDsn-ntvOHISRNfnS8DOu3qmrFQ0VevMRRRc7JRW5Y8E2vAvFTVSWp3QtNj5ilKzkcJMCYxcl9jDhMOelkKuBsqYjD2raF642ezAmNMpHg2tHXhYTQg5r-0DqyUHtvd2bxNhr1Tj_ZMn3/w297-h296-n-k/drawing.png",
  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitKAfo1kR9rp-KYOqVQlZvUPiu2ywkychnOwGt5A0ai0kSrsWJgbRcKetEF5OmFfaAuZUFL_xr4xTQukudGEETnihfkDOr8p7WBLuc2P91V_Bb99kJQaVDhheNwCfaMNQnJ6I_ObKkqfHS/w314-h313-n-k/drawing.png"
  ];
var currentPhoto = 0;
function changePhoto(photo){
  $('#img0').attr('src',pics[photo]);
}
function nextPic(){
  if(currentPhoto < pics.length){
    changePhoto(currentPhoto);
    currentPhoto += 1;
  } else {
    currentPhoto = 0;
    changePhoto(currentPhoto);
    currentPhoto += 1;
  }
}
var tmOut;
function start(){
  tmOut = setInterval(function(){
    nextPic();
  } ,5000);
}
function stop(){
  clearInterval(tmOut);
}
</script>
<input type="button" value="start" onclick="start()">
<input type="button" value="stop" onclick="stop()"><br />
<img id="img0" />