title: How to change the images on button click
body: <p>I want to change the image by pressing the button.I have two button, one is next and other is previous.When the next button press new image must be shown and previous button press last image should come agian.But I can't do this properly.How to do this using jquery?</p>
  
  <pre><code>$(document).ready(function () {
  $('#image2').hide();
  $('#image3').hide();
  $(".arrow").click(function () {
          $('#image1').hide();
          $('#image2').show();
      });
  });
  </code></pre>
  
  <p>Html is</p>
  
  <pre><code>&lt;div class="imageDiv"&gt;
     &lt;div&gt;&lt;img src="potraits.jpg" class="image" id="image1"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="pot.jpg" class="image" id="image2"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;img src="potri.jpg" class="image" id="image3"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;input type="image" src="arrow.gif" class="arrow"/&gt;&lt;/div&gt;
     &lt;div&gt;&lt;input type="image" src="leftarrow.gif" class="leftarrow"/&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>