直接使用代码

图片素材

无

css代码

  <style>
	@charset "utf-8";
/* CSS Document */
* {padding: 0;margin: 0;}
body {margin: 0px;padding: 0px;min-width:1200px;}

/*相关样式*/
#showbox { background:#eee;}
#showbox span { background:url(http://www.bootfastui.cn/img/2020//0501/whitebg.png) repeat;}
#showsum { left:25px; margin-top:10px;}
#showsum span { border:1px solid #ddd;}
#showsum span.sel { border:1px solid #f60;}

.showpage { width:400px; position:relative;}
.showpage a { display:block; width:15px; border:1px solid #ddd; height:60px; line-height:60px; background:#eee; text-align:center; font-size:18px; position:absolute; left:0; top:-62px; text-decoration:none; color:#999;}
.showpage a#shownext { left:auto; right:0;}
.showpage a:hover { background:#ccc; color:#777;}


</style>

HTML+JS代码

 <div class="container">
	<div class="row mar-top30">
		<div class="col-md-6" style="z-index: 2;">	 
	<p>欢迎使用常用商品详情页商品放大镜效果，兼容IE6及以上版本
				图片标签上请务必注意width和height的值，这是必要的值，图片随意形状，随意大小，但必须填写该两个值，图片个数大于1就行，数量不固定</p>
			<div id="showbox">
				
				<img src="http://www.bootfastui.cn/img/2020//0501/01.jpg" width="300" height="300" />
				<img src="http://www.bootfastui.cn/img/2020//0501/02.jpg" width="300" height="300" />
				<img src="http://www.bootfastui.cn/img/2020//0501/03.jpg" width="300" height="300" />
				<img src="http://www.bootfastui.cn/img/2020//0501/04.jpg" width="300" height="300" />
				<img src="http://www.bootfastui.cn/img/2020//0501/05.jpg" width="300" height="300" />
			
			  </div><!--展示图片盒子-->
			  <div id="showsum"></div><!--展示图片里边-->
			  <p class="showpage">
				<a href="javascript:void(0);" id="showlast"> < </a>
				<a href="javascript:void(0);" id="shownext"> > </a>
			  </p>	 
	
		</div>
       </div>
</div>

<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.bootfastui.cn/img/2020//0501/jquery.imagezoom.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var showproduct = {
			"boxid":"showbox",
			"sumid":"showsum",
			"boxw":400,//宽度,该版本中请把宽高填写成一样
			"boxh":400,//高度,该版本中请把宽高填写成一样
			"sumw":60,//列表每个宽度,该版本中请把宽高填写成一样
			"sumh":60,//列表每个高度,该版本中请把宽高填写成一样
			"sumi":7,//列表间隔
			"sums":5,//列表显示个数
			"sumsel":"sel",
			"sumborder":1,//列表边框，没有边框填写0，边框在css中修改
			"lastid":"showlast",
			"nextid":"shownext"
			};//参数定义	  
	   $.ljsGlasses.pcGlasses(showproduct);//方法调用，务必在加载完后执行
	});
  </script>