点击下面链接查看效果：
http://keleyi.com/a/bjad/pmryuvga.htm
本效果只适合jquery 1.9.0以下的版本，例如1.8.3（http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js）。
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>产品多图展示带放大镜代码 - 柯乐义</title> 6 <link href="http://keleyi.com/keleyi/phtml/jqtexiao/19/css/css.css" type="text/css" rel="stylesheet"> 7 <script src="http://keleyi.com/keleyi/pmedia/jquery-1.8.3.min.js" type="text/javascript"></script> 8 <script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/base.js" type="text/javascript"></script> 9 </head> 10 <body> 11 <div align="center"> 12 <div id="preview"> 13 <div class="jqzoom" id="spec-n1" onclick="window.open('http://keleyi.com/a/bjad/pmryuvga.htm')"> 14 <img height="350" src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg" jqimg="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg" width="350"> 15 </div> 16 <div id="spec-n5"> 17 <div class="control" id="spec-left"> 18 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/left.gif" /> 19 </div> 20 <div id="spec-list"> 21 <ul class="list-h"> 22 <li> 23 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img01.jpg"> 24 </li> 25 <li> 26 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img02.jpg"> 27 </li> 28 <li> 29 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img03.jpg"> 30 </li> 31 <li> 32 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img04.jpg"> 33 </li> 34 <li> 35 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img05.jpg"> 36 </li> 37 <li> 38 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img06.jpg"> 39 </li> 40 <li> 41 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img07.jpg"> 42 </li> 43 <li> 44 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img08.jpg"> 45 </li> 46 <li> 47 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img09.jpg"> 48 </li> 49 <li> 50 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img10.jpg"> 51 </li> 52 <li> 53 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/img11.jpg"> 54 </li> 55 </ul> 56 </div> 57 <div class="control" id="spec-right"> 58 <img src="http://keleyi.com/keleyi/phtml/jqtexiao/19/images/right.gif" /> 59 </div> 60 </div> 61 </div> 62 <script type="text/javascript"> 63 $(function () { 64 $(".jqzoom").jqueryzoom({ 65 xzoom: 400, 66 yzoom: 400, 67 offset: 10, 68 position: "right", 69 preload: 1, 70 lens: 1 71 }); 72 $("#spec-list").jdMarquee({ 73 deriction: "left", 74 width: 350, 75 height: 56, 76 step: 2, 77 speed: 4, 78 delay: 10, 79 control: true, 80 _front: "#spec-right", 81 _back: "#spec-left" 82 }); 83 $("#spec-list img").bind("mouseover", function () { 84 var src = $(this).attr("src"); 85 $("#spec-n1 img").eq(0).attr({ 86 src: src.replace("\/n5\/", "\/n1\/"), 87 jqimg: src.replace("\/n5\/", "\/n0\/") 88 }); 89 $(this).css({ 90 "border": "2px solid #ff6600", 91 "padding": "1px" 92 }); 93 }).bind("mouseout", function () { 94 $(this).css({ 95 "border": "1px solid #ccc", 96 "padding": "2px" 97 }); 98 }); 99 }) 100 </script> 101 <script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/lib.js" type="text/javascript"></script> 102 <script src="http://keleyi.com/keleyi/phtml/jqtexiao/19/js/keleyi.js" type="text/javascript"></script> 103 </div> 104 <div style="text-align: center; clear: both"> 105 <p> 106 适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> 107 <p> 108 来源：<a href="http://keleyi.com/" target="_blank">柯乐义</a></p> 109 </div> 110 </body> 111 </html>
