image image using next and previous button in javascript

<div style="display:block"><img  id="largeimg" data-nr="1" src="resources/images/larges/01.jpg"></div>
<img data-nr="1" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/01.jpg">
<img data-nr="2" class="clickable" style='cursor:pointer;' src="resources/images/thumbs/02.jpg">
. . .

<script type = "text/javascript">       
  $(document).ready(function(){
    $(".clickable").each(function({
      this.click(function(){
         $("#largeimg").attr("src",this.attr("src")).attr("data-nr",this.attr("data-nr"));
      }
    }
  });
  function nextpic() {
    newid = parseInt($("#largeimg").attr("data-nr"))+1;
    newsrc = $(".clickable[data-nr="+newid+"]").attr("src");
    $("#largeimg").attr("src",newsrc).attr("data-nr",newid);
  }
</script>