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. And my question is, the code doesn't work..=.=, very obvious, can anybody tell me where the mistakes are?

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


$(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<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>image.length-1){
      current=0;
      $("#image").attr("src")=image[current].src;
    }
    else{
      ++current;
      $("#image").attr("src")=image[current].src;
    }
  });
})