源码下载地址：https://gitee.com/meijunna/lunbo
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN">
<title>商品放大镜</title>
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="copyright" content="" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="./common.js"></script>
<link href="./common.css" rel="stylesheet" type="text/css" />
<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>
</head>
<body>
<div style="width:600px; margin:0 auto;">
<p>商品详情页商品放大镜效果，兼容IE6及以上版本</p>
<p style="padding-bottom:50px;">图片标签上请务必注意width和height的值，这是必要的值，图片随意形状，随意大小，但必须填写该两个值，图片个数大于1就行，数量不固定</p>
<!--页面必要代码,img标签上请务必带上图片真实尺寸px-->
<div id="showbox">
<img src="./1.jpg" width="270" height="180" class="lunbo" />
<img src="./2.jpg" width="430" height="430" class="lunbo" />
</div><!--展示图片盒子-->
<div id="showsum"></div><!--展示图片里边-->
<p class="showpage">
<a href="javascript:void(0);" id="showlast" style="background-image: url(./right.png);background-repeat: no-repeat;"></a>
<a href="javascript:void(0);" id="shownext" style="background-image: url(./left.png);background-repeat: no-repeat;"></a>
</p>
</div>
</body>
</html>
common.css
@charset "utf-8";
/* CSS Document */
* {padding: 0;margin: 0;}
body {margin: 0px;padding: 0px;min-width:1200px;}
/*相关样式*/
#showbox { background:#eee;}
#showbox span { background:url(./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: 27px;height: 28px;line-height: 28px; background:#545454; text-align:center; font-size:18px; position:absolute; left:0; top:-46px; text-decoration:none; color:#999;}
.showpage a#shownext { left:auto; right:0;}
.showpage a:hover { background:#ccc; color:#777;}common.js
jQuery.ljsGlasses = {
pcGlasses:function(_obj){
var _box = $("#"+_obj.boxid);
var _sum = $("#"+_obj.sumid);
var _last,_next;
var _imgarr = _box.find("lunbo");
var _length = _imgarr.length;
var _index = 0;
var _arr = new Array();
_sum.append("<p style='position:absolute;left:0;top:0;'></p>");
var _sumbox = _sum.find("p");
for(var i=0;i<_length;i++){
_arr[i] = new Array();
_arr[i][0] = _imgarr.eq(i).attr("src");
_arr[i][1] = _imgarr.eq(i).attr("width");
_arr[i][2] = _imgarr.eq(i).attr("height");
var _scale = _arr[i][1]/_arr[i][2];
if(_scale == 1){
_arr[i][3] = _obj.boxw;//width
_arr[i][4] = _obj.boxh;//height
_arr[i][5] = 0;//top
_arr[i][6] = 0;//left
_arr[i][7] = _obj.boxw/2;
_arr[i][8] = _obj.boxw*2;//width
_arr[i][9] = _obj.boxh*2;//height
_sumbox.append("<span><img src='"+_imgarr.eq(i).attr("src")+"' width='"+_obj.sumw+"' height='"+_obj.sumh+"' /></span>");
}
if(_scale > 1){
_arr[i][3] = _obj.boxw;//width
_arr[i][4] = _obj.boxw/_scale;
_arr[i][5] = (_obj.boxh-_arr[i][4])/2;
_arr[i][6] = 0;//left
_arr[i][7] = _arr[i][4]/2;
_arr[i][8] = _obj.boxh*2*_scale;//width
_arr[i][9] = _obj.boxh*2;//height
var _place = _obj.sumh - (_obj.sumw/_scale);
_place = _place/2;
_sumbox.append("<span><img src='"+_imgarr.eq(i).attr("src")+"' width='"+_obj.sumw+"' style='top:"+_place+"px;' /></span>");
}
if(_scale < 1){
_arr[i][3] = _obj.boxh*_scale;//width
_arr[i][4] = _obj.boxh;//height
_arr[i][5] = 0;//top
_arr[i][6] = (_obj.boxw-_arr[i][3])/2;
_arr[i][7] = _arr[i][3]/2;
_arr[i][8] = _obj.boxw*2;//width
_arr[i][9] = _obj.boxw*2/_scale;
var _place = _obj.sumw - (_obj.sumh*_scale);
_place = _place/2;
_sumbox.append("<span><img src='"+_imgarr.eq(i).attr("src")+"' height='"+_obj.sumh+"' style='left:"+_place+"px;' /></span>");
}
}
_imgarr.remove();
_sum.append("<div style='clear:both;width:100%;'></div>");
var _sumarr = _sum.find("span");
var _sumimg = _sum.find("img");
_sumarr.eq(_index).addClass(_obj.sumsel);
var _border = _obj.sumborder*2 + _obj.sumh;
var _sumwidth = (_border+_obj.sumi)*_obj.sums;
var _sumboxwidth = (_border+_obj.sumi)*_length;
_sum.css({
"overflow":"hidden",
"height":_border+"px",
"width":_sumwidth+"px",
"position":"relative"
});
_sumbox.css({
"width":_sumboxwidth+"px"
});
_sumarr.css({
"float":"left",
"margin-left":_obj.sumi+"px",
"width":_obj.sumw+"px",
"height":_obj.sumh+"px",
"overflow":"hidden",
"position":"relative"
});
_sumimg.css({
"max-width":"100%",
"max-height":"100%",
"position":"relative"
});
_box.append("<div style='position:relative;'><b style='display:block;'><img style='display:block;' src='' /></b><span style='position:absolute;left:0;top:0;display:none;z-index:5;'></span></div><p style='position:absolute;overflow:hidden;top:0;display:none;'><img style='max-width:none;max-height:none;position:relative;left:0;top:0;' src='' /></p>");
var _glass = _box.find("span");
var _boximg = _box.find("b img");
var _imgout = _box.find("div");
var _showbox = _box.find("p");
var _showimg = _box.find("p img");
_box.css({
"width":_obj.boxw+"px",
"height":_obj.boxh+"px",
"position":"relative"
});
var _showboxleft = _obj.boxw + 10;
_showbox.css({
"width":_obj.boxw+"px",
"height":_obj.boxh+"px",
"left":_showboxleft+"px"
});
var imgPlaces = function(){
_showimg.attr("src",_arr[_index][0]);
_boximg.attr("src",_arr[_index][0]);
_boximg.css({
"width":_arr[_index][3]+"px",
"height":_arr[_index][4]+"px"
});
_imgout.css({
"width":_arr[_index][3]+"px",
"height":_arr[_index][4]+"px",
"top":_arr[_index][5]+"px",
"left":_arr[_index][6]+"px",
"position":"relative"
});
_glass.css({
"width":_arr[_index][7]+"px",
"height":_arr[_index][7]+"px"
});
_showimg.css({
"width":_arr[_index][8]+"px",
"height":_arr[_index][9]+"px"
});
};
imgPlaces();
_imgout.mousemove(function(e){
var _gl_w = _glass.width()/2;
var _maxX = _imgout.width() - _gl_w;
var _maxY = _imgout.height() - _gl_w;
var _moveX = 0,_moveY = 0;
var _nowX = e.pageX - _imgout.offset().left;
var _nowY = e.pageY - _imgout.offset().top;
var _moveX = _nowX-_gl_w,_moveY = _nowY-_gl_w;
if(_nowX <= _gl_w){ _moveX = 0; }
if(_nowX >= _maxX){ _moveX = _maxX-_gl_w; }
if(_nowY <= _gl_w){ _moveY = 0;}
if(_nowY >= _maxY){ _moveY = _maxY-_gl_w;}
_glass.css({"left":_moveX+"px","top":_moveY+"px"});
var _imgX = -_moveX*_showbox.width()/_glass.width();
var _imgY = -_moveY*_showbox.width()/_glass.width();
_showimg.css({"left":_imgX+"px","top":_imgY+"px"});
});//mouse END
_imgout.mouseenter(function(){
_glass.css("display","block");
_showbox.css("display","block");
});
_imgout.mouseleave(function(){
_glass.css("display","none");
_showbox.css("display","none");
});
//鍒楄〃閮ㄥ垎
var _nextbtn = $("#"+_obj.nextid);
var _lastbtn = $("#"+_obj.lastid);
var _moveindex = 0;//绱㈠紩绉诲姩
var _sumListMove = function(){
var _leftmove = -_moveindex*(_border+_obj.sumi);
if(_sumbox.is(":animated")){_sumbox.stop(true,true);}
_sumbox.animate({left:_leftmove+"px"},300);
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
};//fun END
if(_length <= _obj.sums){
var _place = (_obj.sums-_length)*_border/2;
_sumbox.css("left",_place+"px");
_nextbtn.click(function(){
_index++;
if(_index >= _length){ _index=_length-1;}
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
});
_lastbtn.click(function(){
_index--;
if(_index <= 0){ _index=0;}
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
});
}else{
var _maxNum = _length-_obj.sums;
_nextbtn.click(function(){
_moveindex++;
if(_moveindex >= _maxNum){ _moveindex=_maxNum; }
if(_index <= _moveindex){ _index=_moveindex;}
_sumListMove();
});
_lastbtn.click(function(){
_moveindex--;
if(_moveindex <= 0){ _moveindex=0;}
if(_index >= _moveindex+_obj.sums){ _index=_moveindex+_obj.sums-1;}
_sumListMove();
});
}//if END
_sumarr.hover(function(){
_index = $(this).index();
_sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel);
imgPlaces();
});
}//pcGlasses END
}//ljsGlasses END注意，添加如下代码，可以实现，箭头刚好在缩略图两端
<script>
window.onload=function(){
var rowwidth=$("#showsum p").width()
$(".showpage").css("width",rowwidth+"px");
}
</script>