change images by clicking left and right
- by Qin
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;
}
});
})
