title: Adding HTML button to handle incrementation over element within a from within a looping array
body: <p>4I'm currently working on a HTML code for a presentation that changes image based on a javascript array.</p>
  
  <p>I managed to incorporate a looping code from a friend into my code, but I don't understand how to only make the image change once.</p>
  
  <p>At the moment, it works that the javascript loops the items in the array to display different images, but I'd like it to work that it only changes once, based on a button click.</p>
  
  <p>I'd like to keep my array if possible.
  Here's the code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;script type='text/javascript'&gt;
      var banners = ["banner1.png", "banner2.png", "banner3.png"
        "banner4.png"
      ];
      var bnrCntr = 0;
      var timer;
  
      function banCycle() {
        if (++bnrCntr == 4)
          bnrCntr = 0;
  
        timer = setTimeout("banCycle()", 4000);
      }
  
      function stopCycle() {
        clearTimeout(timer);
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;img src="bannerad1.png" name="banner" width=110 height=200&gt;
  
    &lt;form&gt;
      &lt;input type="button" value="Cycle" name="Cycle" onclick="banCycle()"&gt;
      &lt;input type="button" value="Stop" name="Stop" onclick="stopCycle()"&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Thank you in advance!</p>
  
  <p>EDIT-
  Just to clarify, I'm limited to pure javascript/HTML, and therefore I cannot use JSQuery.</p>