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

CSS部分： 

  1. <style>
  2. .content-img-list img {
  3. 	height: 30px;
  4. 	width: 45px;
  5. 	vertical-align: middle;
  6. }
  7. .content-img-box .content-img-list {
  8. 	float: left;
  9. 	margin-right: 10px;
  10. 	border: 2px solid #fff;
  11.  *zoom:1;
  12. 	position: relative;
  13. 	transition: border-color .2s ease-out;
  14. 	cursor: pointer;
  15. }
  16. .member-discuss .content-img-box {
  17. 	margin-top: 8px;
  18. }
  19. .content-img-box ul .tm-current {
  20. 	border: 2px solid #fab900;
  21. 	border-radius: 2px;
  22. 	-webkit-border-radius: 2px;
  23. 	-moz-border-radius: 2px;
  24. 	-o-border-radius: 2px;
  25. 	cursor: pointer;
  26. }
  27. .tm-current .tm-photos-arrow {
  28. 	filter: alpha(opacity=100);
  29. 	opacity: 1;
  30. 	bottom: -12px
  31. }
  32. .tm-photos-arrow {
  33. 	width: 0;
  34. 	height: 0;
  35. 	line-height: 0;
  36. 	font-size: 0;
  37. 	border: transparent 6px dashed;
  38. 	border-top: 6px solid #fab900;
  39. 	position: absolute;
  40. 	left: 15px;
  41. 	filter: alpha(opacity=0);
  42. 	opacity: 0;
  43. 	bottom: -8px;
  44. 	background: 0 0
  45. }
  46. .content-img-box .img_zoom_box img {
  47. 	cursor: pointer;
  48. }
  49. .content-img-box .img_zoom_box {
  50. 	position: relative;
  51. 	margin: 10px 0;
  52. 	border: 1px solid #141414;
  53. 	background: #fff;
  54. 	padding: 2px;
  55. 	overflow: hidden;
  56. 	display:none;
  57. 	width:0px;
  58. 	height:0px;
  59. }
  60. .img_zoom_box .img-goleft {
  61. 	width: 30%;
  62.     left: 0;
  63.     cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-prev.cur),auto;
  64.     z-index: 3;
  65. 	position: absolute;
  66.     height: 100%;
  67.     top: 0;
  68.     background: fixed url(about:blank);
  69. }
  70. .img_zoom_box .img-goleft-ico {
  71. 	background-image: url(../images/iconfont-left.png);
  72. 	background-repeat: no-repeat;
  73. 	background-position: center center;	
  74. }
  75. .img_zoom_box .img-goright {
  76. 	width: 30%;
  77.     right: 0;
  78.     cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/pic-next.cur),auto;
  79.     z-index: 3;
  80. 	position: absolute;
  81.     height: 100%;
  82.     top: 0;
  83.     background: fixed url(about:blank);
  84. }
  85. .img_zoom_box .img-goright-ico {
  86. 	background-image: url(../images/iconfont-right.png);
  87. 	background-repeat: no-repeat;
  88. 	background-position: center center;	
  89. }
  90. .img_zoom_box .img-gomid {
  91. 	width: 100%;
  92.     left: 0;
  93.     cursor: url(http://static.360buyimg.com/item/main/1.0.6/css/i/small.cur),auto;
  94.     z-index: 2;
  95. 	position: absolute;
  96.     height: 100%;
  97.     top: 0;
  98.     background: fixed url(about:blank);
  99. }
  100. .img-go-box{
  101. 	position: absolute;
  102.     height: 100%;
  103.     width: 100%;
  104. }
  105. .img-zoom-viewer{
  106. 	position: relative;
  107. }
  108. .img-zoom-viewer img{
  109. 	max-width:496px;
  110. }
  111. </style>


HTML部分： 

  1. <div class="content-img-box">
  2. 	<ul>
  3. 		<li class="content-img-list">
  4. 			<img src="https://www.wikimoe.com/content/uploadfile/201602/d2da1456548019.jpg" /> <b class="tm-photos-arrow"></b> 
  5. 		</li>
  6. 		<li class="content-img-list">
  7. 			<img src="https://www.wikimoe.com/content/uploadfile/201602/60231455544046.jpg" /> <b class="tm-photos-arrow"></b> 
  8. 		</li>
  9. 		<li class="content-img-list">
  10. 			<img src="https://www.wikimoe.com/content/uploadfile/tpl_options/hd1.jpg" /> <b class="tm-photos-arrow"></b> 
  11. 		</li>
  12. 	</ul>
  13. 	<div style="clear:both;">
  14. 	</div>
  15. 	<div class="img_zoom_box">
  16. 		<div class="img-zoom-viewer">
  17. 		</div>
  18. 		<div class="img-goleft">
  19. 		</div>
  20. 		<div class="img-gomid">
  21. 		</div>
  22. 		<div class="img-goright">
  23. 		</div>
  24. 	</div>
  25. </div>


JS部分：

  1. <script language="javascript">
  2. $(document).ready(function () {
  3. 	$('.content-img-list').click(function() {  
  4. 	  if($(this).hasClass("tm-current")){
  5. 		  $(this).removeClass("tm-current");
  6. 		  $('.img_zoom_box').stop(true, false).animate({
  7. 			  height:'0px',
  8.               width:'0px'
  9. 			  }).hide(1);	 
  10. 	  }
  11. 	  else{
  12. 		  $('.img_zoom_box').stop(true, false).animate({
  13. 			  height:'0px',
  14.               width:'0px'
  15. 			  }).hide(1);	
  16. 			  $('.content-img-list').removeClass("tm-current");
  17. 		  
  18. 		  $(".img-goleft").show();
  19. 		  $(".img-goright").show();
  20. 		  $(this).parent().parent().find('.content-img-list').removeClass("tm-current");
  21.           $(this).addClass("tm-current");
  22. 		  var img = $(this).find("img").clone();
  23. 		  var screenImage = $(this).find("img");
  24. 		  var theImage = new Image();
  25. 		  theImage.src = screenImage.attr("src");
  26. 		  var imageWidth = theImage.width;
  27. 		  var imageHeight = theImage.height;
  28. 		  /*判断原图是否超过指定宽度*/
  29. 		  if(imageWidth>496){
  30. 			  var imageHeight = 496/imageWidth*theImage.height;
  31. 			  var imageWidth = 496;
  32. 		  }
  33. 		   $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
  34. 			  height:imageHeight,
  35.               width:imageWidth
  36. 			  });
  37. 		  $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img)
  38. 		  var lile = $(this).parent().parent().find('.content-img-list').length;
  39. 		  if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){
  40. 		     $(".img-goright").hide();
  41. 			 $(".img-goleft").show();
  42. 	       }
  43. 		  if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){
  44. 		     $(".img-goleft").hide();
  45. 			 $(".img-goright").show();
  46. 	      }
  47. 		  if(lile <= 1){
  48. 		     $(".img-goleft").hide();
  49. 			 $(".img-goright").hide();
  50. 	      }
  51. 	  }
  52.     });
  53.     $('.img-gomid').click(function() { 
  54. 	   $('.content-img-list').removeClass("tm-current");
  55. 	   $(this).parent().parent().find('.img_zoom_box').stop(true, false).animate({
  56. 			  height:'0px',
  57.               width:'0px'
  58. 			  }).hide(1);	  
  59. 	});
  60.    
  61. 	   $('.img-goright').click(function() { 
  62. 	      $('.tm-current').addClass("tm-go")
  63. 	      var img = $('.tm-current').next(".content-img-list").find("img").clone();
  64. 		  var screenImage = $('.tm-current').next(".content-img-list").find("img");
  65. 		  var theImage = new Image();
  66. 		  theImage.src = screenImage.attr("src");
  67. 		  var imageWidth = theImage.width;
  68. 		  var imageHeight = theImage.height;
  69. 		  /*判断原图是否超过指定宽度*/
  70. 		  if(imageWidth>496){
  71. 			  var imageHeight = 496/imageWidth*theImage.height;
  72. 			  var imageWidth = 496;
  73. 		  }
  74. 		   $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
  75. 			  height:imageHeight,
  76.               width:imageWidth
  77. 			  });
  78. 		   $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img);
  79. 		   $('.tm-current').next(".content-img-list").addClass("tm-current").prev().removeClass("tm-current");
  80. 		   
  81. 		   if($(this).parent().parent().find('.content-img-list').last().hasClass("tm-current")){
  82. 		     $(".img-goright").hide();
  83. 			 $(".img-goleft").show();
  84. 	       }
  85. 		   else{
  86. 			 $(".img-goright").show();
  87. 			 $(".img-goleft").show();
  88. 		   }
  89. 	   });	   
  90. 	   $('.img-goleft').click(function() { 
  91. 	      var img = $('.tm-current').prev(".content-img-list").find("img").clone();
  92. 		  var screenImage = $('.tm-current').prev(".content-img-list").find("img");
  93. 		  var theImage = new Image();
  94. 		  theImage.src = screenImage.attr("src");
  95. 		  var imageWidth = theImage.width;
  96. 		  var imageHeight = theImage.height;
  97. 		   /*判断原图是否超过指定宽度*/
  98. 		  if(imageWidth>496){
  99. 			  var imageHeight = 496/imageWidth*theImage.height;
  100. 			  var imageWidth = 496;
  101. 		  }
  102. 		   $(this).parent().parent().find('.img_zoom_box').show().stop(true, false).animate({
  103. 			  height:imageHeight,
  104.               width:imageWidth
  105. 			  });
  106. 		   $(this).parent().parent().find('.img-zoom-viewer').empty().prepend(img);
  107. 		   $('.tm-current').prev(".content-img-list").addClass("tm-current").next().removeClass("tm-current");
  108. 		   if($(this).parent().parent().find('.content-img-list').first().hasClass("tm-current")){
  109. 		     $(".img-goleft").hide();
  110. 			 $(".img-goright").show();
  111. 	       }
  112. 		   else{
  113. 			 $(".img-goright").show();
  114. 			 $(".img-goleft").show();
  115. 		   }
  116. 	   });	
  117. });
  118. </script>

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

效果：