title: Image Array and Arrow Keys
body: <p>I'm just trying to get a hang of javascript, and this is a script I assembled from various sources, just simple enough so I can understand on the level it is. Please don't get too complex, though if you do I would appreciate small explanation and don't expect me to know...</p>
  
  <pre><code>&lt;script type="text/javascript" language="JavaScript"&gt;
  imgs=Array("01.jpg","02.jpg","03.jpg","04.jpg","05.jpg");
  var x=0;
  document.onkeydown = checkKey;
  function checkKey(e) {
      e = e || window.event;
      if (e.keyCode == '37') {
          document.getElementById("myImage").src=imgs[--x];
      }
      else if (e.keyCode == '39') {
          document.getElementById("myImage").src=imgs[++x];
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>and in the body...</p>
  
  <pre><code>&lt;img id="myImage" src="01.jpg" style="width:100%"&gt;
  </code></pre>
  
  <p>What it's supposed to do is make a simple image gallery of images that fit to the screen width, which can be navigated from the images in the array using arrow keys. It works fine, for me at least, except the fact that if I try to go to the previous image while x=0, or the next image from x=4, it extends indefinitely, not looping back to 01.jpg from 05.jpg and vice versa as I want. My theory didn't work. I just know bits and pieces about this. Anybody know an easy way to with the least modification to this original script?</p>
  
  <p>It doesn't have to look professional or 'pretty'. I'm just bored, and experimenting around. Maybe future aspirations to be a web designer, but not for now certainly :D Oh, and please no JQuery referencing? Sure they work, but I just want to understand a solution to this on a basic level, and get a standalone script.</p>