Code:

<style type="text/css">
  a{ color:#000000; text-decoration:underline;}
  #div{ width:400px; text-align:left; padding:10px; border:lpx solid #000000;}
  #img_container{ text-align:center; padding:0px;}
</style>

<div id="div">
   <span id="prev"><a href="" onClick="return prev_img();">Prev</a></span>
   <span id="next"><a href="" onClick="return next_img();">Next</a></span>
</div>

<div id="pg"></div>

<div id="img_container">
   <img src="" id="img">
</div>

<script type="text/javascript">
var prev = document.getElementById("prev");
var next = document.get£lementById("next");
var imge = document.getElementById("img");
var page = document.getElementById("pg");

var imag = [
   "1.jpg",
   "2.jpg",
   "3.jpg",
   "4.jpg",
   "5.jpg",
   "6.jpg",
   "7.jpg",
];

var i = 0;
imge.setAttribute("src",imag[i]);
prev.innerHTML="Prev";
page.innerHTML=i;

function next_img(){
   i++;
   page.innerHTML=i;
   imge.setAttribute("src",imag[i]);
   if(i==imag.length-1){
       next.innerHTML="Next";
       prev.innerHTML="<a href='' onClick='return prev_img();'>Prev</a>";
   }else{
       next.innerHTML="<a href='' onClick='return next_img();'>Next</a>";
       prev.innerHTML="<a href='' onClick='return prev_img();'>Prev</a>";
   }
   return false;
}

function prev_img(){
   i--;
   page.innerHTML=i;
   imge.setAttribute("src",imag[i]);
   if (i==0){
      prev.innerHTML="Prev";
      next.innerHTML="<a href='' onClick='return next_img();'>Next</a>";
   }else{
      prev.innerHTML="<a href='' onClick='return prev_img();'>Prev</a>";
      next.innerHTML="<a href='' onClick='return next_img();'>Next</a>";
   }
   return false;
}
</script>