change images by clicking left and right
<p>I want to display an image in the center of the page, then 2 buttons, left, and right. When I click on left, the image changes to previous one, and move to next image by clicking right. The code doesn't work. Can anybody tell me where the mistakes are?</p>

<pre><code>&lt;table id="frontpage"&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;input type="button" id="left" value="left"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;img id="image" alt="Image" src="./image/guildwars2/gw2_fight.jpg"/&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="button" id="right" value="right"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;


$(document).ready(function(){
  var image=new Array();
  var current=0;

  image[0]=new Image();
  image[0].src="./image/guildwars2/gw2_fight.jpg";
  image[1]=new Image();
  image[1].src="./image/diablo3/d3.jpg";
  image[2]=new Image();
  image[2].src="./image/dota2/catOnWater.jpg";

  $("#left").click(function(){
    if(current-1&lt;0){
      current=image.length-1;
      $("#image").attr("src")=image[current].src;
    }
    else{
      --current;
      $("#image").attr("src")=image[current].src;
    }
  });

  $("#right").click(function(){
    if(current+1&gt;image.length-1){
      current=0;
      $("#image").attr("src")=image[current].src;
    }
    else{
      ++current;
      $("#image").attr("src")=image[current].src;
    }
  });
})
</code></pre>
