为图像添加上一个和下一个按钮

var index = 0;
var total = $(".medium img").length;

$(function() {
  $(".medium img:eq(0)").nextAll().hide();
  $(".thumbs img").click(function(e) {
    var index = $(this).index();
    $(".medium img").eq(index).show().siblings().hide();
  });
});

$("#prev").click(function() {
  index--;
  if (index < 0) index = total - 1;
  $(".medium img").eq(index).show().siblings().hide();
});

$("#next").click(function() {
  index++;
  if (index >= total) index = 0;
  $(".medium img").eq(index).show().siblings().hide();
});

.thumbs img {
  width: 30%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
}
.medium {
  padding-bottom: 10px;
}
.medium img {
  width: 90%;
}
.thumbs img:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="medium">
  <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg" />

  <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg" />

  <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg" />
</div>


<div class="thumbs">
  <img src="http://cbsnews2.cbsistatic.com/hub/i/r/2014/11/28/45be34dd-e568-40e4-9e2c-a89be231686b/thumbnail/620x350/6042a86399feb71dcb10a73aaa3baf6f/star-wars-force-awakens-teaser-lightsaber-promo.jpg">

  <img src="http://cdn.idigitaltimes.com/sites/idigitaltimes.com/files/styles/large/public/2015/06/27/star-wars-force-awakens-teaser-3.jpg">

  <img src="http://www.igoodmorning.net/wp-content/uploads/2015/08/Star-Wars-The-Force-Awakens-Wallpapers.jpg">
</div>

<button id="prev">previous</button>
<button id="next">next</button>