#container {  
  margin-top: 40px;  
  }  
  #navigate {  
  text-align: center;  
  }  
  #navigate a, span {  
  position: relative;  
  top: 3px;  
  background: #0099cc;  
  text-decoration: none;  
  color: #fff;  
  padding: 4px 8px 0 8px;  
  font-size: 20px;  
  font-weight: bold;  
  -webkit-border-radius: .3em .3em 0 0;  
  -moz-border-radius: .3em .3em 0 0;  
  border-radius: .3em .3em 0 0;  
  }  
  #navigate a:hover {  
  color: #d3d3d3;  
  }  
  #navigate span {  
  display: none;  
  color: #999;  
  }  
  #img_container {  
  overflow: hidden;  
  width: 500px;  
  margin: 0 auto;  
  border: 8px solid #0099cc;  
  -webkit-border-radius: .5em;  
  -moz-border-radius: .5em;  
  border-radius: .5em;  
  }  
  #img_box {  
  position: relative;  
  width: 3000px;  
  margin: 0;  
  }  
  #img_box img {  
  float: left;  
  }  
  #imgthumb_box {  
  text-align: center;  
  }  
  #imgthumb_box a {  
  margin-left: 4px;  
  }  
  #imgthumb_box a img {  
  border: 6px solid #e3e3e3;  
  position: relative;  
  top: 10px;  
  -webkit-border-radius: .3em;  
  -moz-border-radius: .3em;  
  border-radius: .3em;  
  }  
  #imgthumb_box a img:hover {  
  border-color: #666;  
  }

<script>  
  $(document).ready(function () {  
  var total = $("#img_box img").length;  

  $("#imglink1 img").css({  
  "border-color": "#0099cc",  
  "top": "-5px"  
  });  

  $(".thumblink").click(function () {  
  var imgnumber = parseInt($(this).attr('id').replace("imglink", ""));  
  var move = -($("#img" + imgnumber).width() * (imgnumber - 1));  

  $("#img_box").animate({  
  left: move  
  }, 500);  

  $("#imgthumb_box").find("img").removeAttr("style");  
  $(this).find("img").css({  
  "border-color": "#0099cc",  
  "top": "-5px",  
  "border-top-width": "-5px"  
  });  
  return false;  
  });  

  $("#navigate a").click(function () {  
  var imgwidth = $("#img1").width();  
  var box_left = $("#img_box").css("left");  
  var el_id = $(this).attr("id");  
  var move, imgnumber;  

  if (box_left == 'auto') {  
  box_left = 0;  
  } else {  
  box_left = parseInt(box_left.replace("px", ""));  
  }  

  // if prev  
  if (el_id == 'linkprev') {  
  if ((box_left - imgwidth) == -(imgwidth)) {  
  move = -(imgwidth * (total - 1));  
  } else {  
  move = box_left + imgwidth;  
  }  

  imgnumber = -(box_left / imgwidth);  
  if (imgnumber == 0) {  
  imgnumber = total;  
  }  
  } else if (el_id == 'linknext') {  
  // if in the last image, move to first  
  if (-(box_left) == (imgwidth * (total - 1))) {  
  move = 0;  
  } else {  
  move = box_left - imgwidth;  
  }  

  imgnumber = Math.abs((box_left / imgwidth)) + 2;  
  if (imgnumber == (total + 1)) {  
  imgnumber = 1;  
  }  
  } else if (el_id == 'linkfirst') {  
  move = 0;  
  imgnumber = 1;  
  } else if (el_id == 'linklast') {  
  move = -(imgwidth * (total - 1));  
  imgnumber = total;  
  }  

  // styling selected image  
  $("#imgthumb_box").find("img").removeAttr("style");  
  $("#imglink" + imgnumber).find("img").css({  
  "border-color": "#0099cc",  
  "top": "-5px",  
  "border-top-width": "-5px"  
  });  

  $("#navigate a").hide();  
  $("#navigate span").show();  

  $("#img_box").animate({  
  left: move + 'px'  
  }, 400, function () {  
  $("#navigate a").show();  
  $("#navigate span").hide();  
  });  

  return false;  
  });  
  });  
  </script>

<div id="container">  
  <div id="img_container">  
  <div id="img_box">  
  <img id="img1" src="Ссылка на большое изображение" />  
  <img id="img2" src="Ссылка на большое изображение" />  
  <img id="img3" src="Ссылка на большое изображение" />  
  <img id="img4" src="Ссылка на большое изображение" />  
  <img id="img5" src="Ссылка на большое изображение" />  
  <div style="clear:both;"></div>  
  </div>  
  </div>  
  <div id="imgthumb_box">  
  <a href="" class="thumblink" id="imglink1"><img src="Ссылка на миниатюру"/></a>  
  <a href="" class="thumblink" id="imglink2"><img src="Ссылка на миниатюру"/></a>  
  <a href="" class="thumblink" id="imglink3"><img src="Ссылка на миниатюру"/></a>  
  <a href="" class="thumblink" id="imglink4"><img src="Ссылка на миниатюру"/></a>  
  <a href="" class="thumblink" id="imglink5"><img src="Ссылка на миниатюру"/></a>  
  </div>  
  </div>