自己写了个类似淘宝晒图的代码，但是感觉还有些凌乱，应该还能优化。

CSS部分：

<style>
.content-img-list img {
	height: 30px;
	width: 45px;
	vertical-align: middle;
}
.content-img-box .content-img-list {
	float: left;
	margin-right: 10px;
	border: 2px solid #fff;
 *zoom:1;
	position: relative;
	transition: border-color .2s ease-out;
	cursor: pointer;
}
.member-discuss .content-img-box {
	margin-top: 8px;
}
.content-img-box ul .tm-current {
	border: 2px solid #fab900;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	cursor: pointer;
}
.tm-current .tm-photos-arrow {
	filter: alpha(opacity=100);
	opacity: 1;
	bottom: -12px
}
.tm-photos-arrow {
	width: 0;
	height: 0;
	line-height: 0;
	font-size: 0;
	border: transparent 6px dashed;
	border-top: 6px solid #fab900;
	position: absolute;
	left: 15px;
	filter: alpha(opacity=0);
	opacity: 0;
	bottom: -8px;
	background: 0 0
}
.content-img-box .img_zoom_box img {
	cursor: pointer;
}
.content-img-box .img_zoom_box {
	position: relative;
	margin: 10px 0;
	border: 1px solid #141414;
	background: #fff;
	padding: 2px;
	overflow: hidden;
	display:none;
	width:0px;
	height:0px;
}
.img_zoom_box .img-goleft {
	width: 30%;
    left: 0;
    cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-prev.cur),auto;
    z-index: 3;
	position: absolute;
    height: 100%;
    top: 0;
    background: fixed url(about:blank);
}
.img_zoom_box .img-goleft-ico {
	background-image: url(../images/iconfont-left.png);
	background-repeat: no-repeat;
	background-position: center center;	
}
.img_zoom_box .img-goright {
	width: 30%;
    right: 0;
    cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-next.cur),auto;
    z-index: 3;
	position: absolute;
    height: 100%;
    top: 0;
    background: fixed url(about:blank);
}
.img_zoom_box .img-goright-ico {
	background-image: url(../images/iconfont-right.png);
	background-repeat: no-repeat;
	background-position: center center;	
}
.img_zoom_box .img-gomid {
	width: 100%;
    left: 0;
    cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/small.cur),auto;
    z-index: 2;
	position: absolute;
    height: 100%;
    top: 0;
    background: fixed url(about:blank);
}
.img-go-box{
	position: absolute;
    height: 100%;
    width: 100%;
}
.img-zoom-viewer{
	position: relative;
}
.img-zoom-viewer img{
	max-width:496px;
}
</style>

HTML部分：

<div class="content-img-box">
	<ul>
		<li class="content-img-list">
			<img src="https://www.wikimoe.com/content/uploadfile/201602/d2da1456548019.jpg" /> <b class="tm-photos-arrow"></b> 
		</li>
		<li class="content-img-list">
			<img src="https://www.wikimoe.com/content/uploadfile/201602/60231455544046.jpg" /> <b class="tm-photos-arrow"></b> 
		</li>
		<li class="content-img-list">
			<img src="https://www.wikimoe.com/content/uploadfile/tpl_options/hd1.jpg" /> <b class="tm-photos-arrow"></b> 
		</li>
	</ul>
	<div style="clear:both;">
	</div>
	<div class="img_zoom_box">
		<div class="img-zoom-viewer">
		</div>
		<div class="img-goleft">
		</div>
		<div class="img-gomid">
		</div>
		<div class="img-goright">
		</div>
	</div>
</div>

JS部分：

<script language="javascript">
$(document).ready(function () {
	$('.content-img-list').click(function() {  
	  if($(this).hasClass("tm-current")){
		  $(this).removeClass("tm-current");
		  $('.img_zoom_box').stop(true, false).animate({
			  height:'0px',
              width:'0px'
			  }).hide(1);	 
	  }
	  else{
		  $('.img_zoom_box').stop(true, false).animate({
			  height:'0px',
              width:'0px'
			  }).hide(1);	
			  $('.content-img-list').removeClass("tm-current");
		  
		  $(".img-goleft").show();
		  $(".img-goright").show();
		  $(this).parent().parent().find('.content-img-list').removeClass("tm-current");
          $(this).addClass("tm-current");
		  var img = $(this).find("img").clone();
		  var screenImage = $(this).find("img");
		  var theImage = new Image();
		  theImage.src = screenImage.attr("src");
		  var imageWidth = theImage.width;
		  var imageHeight = theImage.height;
		  /*判断原图是否超过指定宽度*/
		  if(imageWidth>496){
			  var imageHeight = 496/imageWidth*theImage.height;
			  var imageWidth = 496;
		  }
		   $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
			  height:imageHeight,
              width:imageWidth
			  });
		  $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img)
		  var lile = $(this).parent().parent().find('.content-img-list').length;
		  if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){
		     $(".img-goright").hide();
			 $(".img-goleft").show();
	       }
		  if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){
		     $(".img-goleft").hide();
			 $(".img-goright").show();
	      }
		  if(lile <= 1){
		     $(".img-goleft").hide();
			 $(".img-goright").hide();
	      }
	  }
    });
    $('.img-gomid').click(function() { 
	   $('.content-img-list').removeClass("tm-current");
	   $(this).parent().parent().find('.img_zoom_box').stop(true, false).animate({
			  height:'0px',
              width:'0px'
			  }).hide(1);	  
	});
   
	   $('.img-goright').click(function() { 
	      $('.tm-current').addClass("tm-go")
	      var img = $('.tm-current').next(".content-img-list").find("img").clone();
		  var screenImage = $('.tm-current').next(".content-img-list").find("img");
		  var theImage = new Image();
		  theImage.src = screenImage.attr("src");
		  var imageWidth = theImage.width;
		  var imageHeight = theImage.height;
		  /*判断原图是否超过指定宽度*/
		  if(imageWidth>496){
			  var imageHeight = 496/imageWidth*theImage.height;
			  var imageWidth = 496;
		  }
		   $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
			  height:imageHeight,
              width:imageWidth
			  });
		   $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img);
		   $('.tm-current').next(".content-img-list").addClass("tm-current").prev().removeClass("tm-current");
		   
		   if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){
		     $(".img-goright").hide();
			 $(".img-goleft").show();
	       }
		   else{
			 $(".img-goright").show();
			 $(".img-goleft").show();
		   }
	   });	   
	   $('.img-goleft').click(function() { 
	      var img = $('.tm-current').prev(".content-img-list").find("img").clone();
		  var screenImage = $('.tm-current').prev(".content-img-list").find("img");
		  var theImage = new Image();
		  theImage.src = screenImage.attr("src");
		  var imageWidth = theImage.width;
		  var imageHeight = theImage.height;
		   /*判断原图是否超过指定宽度*/
		  if(imageWidth>496){
			  var imageHeight = 496/imageWidth*theImage.height;
			  var imageWidth = 496;
		  }
		   $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
			  height:imageHeight,
              width:imageWidth
			  });
		   $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img);
		   $('.tm-current').prev(".content-img-list").addClass("tm-current").next().removeClass("tm-current");
		   if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){
		     $(".img-goleft").hide();
			 $(".img-goright").show();
	       }
		   else{
			 $(".img-goright").show();
			 $(".img-goleft").show();
		   }
	   });	
});
</script>

※本代码为原创代码，如需转载请注明出处：www.wikimoe.com。