小图地址：
http://img.exuanshi.com/t014ed11360ec9bdb77.jpg?x-oss-process=image/format,webp/resize,w_122,h_84,m_fill
大图地址：
http://img.exuanshi.com/t014ed11360ec9bdb77.jpg
大图小图，实则是同一个图片，不清楚这个具体怎么实现的？
http://www.php.cn/js-tutorial-360972.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
淘宝网图片预览效果
div#PreviewBox{ position:absolute; padding-left:6px; display: none; Z-INDEX:2006; } div#PreviewBox span{ width:7px; height:13px; position:absolute; left:0px; top:9px; background:url() 0 0 no-repeat; } div#PreviewBox div.Picture{ float:left; border:1px #666 solid; background:#FFF; } div#PreviewBox div.Picture div{ border:4px #e8e8e8 solid; } div#PreviewBox div.Picture div a img{ margin:19px; border:1px #b6b6b6 solid; display: block; max-height: 250px; max-width: 250px; }
var maxWidth=250; var maxHeight=250; function getPosXY(a,offset) { var p=offset?offset.slice(0):[0,0],tn; while(a) { tn=a.tagName.toUpperCase(); if(tn=='IMG') { a=a.offsetParent;continue; } p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0); p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0); if(tn=="BODY") break; a=a.offsetParent; } return p; } function checkComplete() { if(checkComplete.__img&&checkComplete.__img.complete) checkComplete.__onload(); } checkComplete.__οnlοad=function() { clearInterval(checkComplete.__timeId); var w=checkComplete.__img.width; var h=checkComplete.__img.height; if(w>=h&&w>maxWidth) { previewImage.style.width=maxWidth+'px'; } else if(h>=w&&h>maxHeight) { previewImage.style.height=maxHeight+'px'; } else { previewImage.style.width=previewImage.style.height=''; } previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null; } function showPreview(e) { hidePreview (e); previewFrom=e.target||e.srcElement; previewImage.src=loadingImg;//More:www.codefans.net previewImage.style.width=previewImage.style.height=''; previewTimeoutId=setTimeout('_showPreview()',500); checkComplete.__img=null; } function hidePreview(e) { if(e) { var toElement=e.relatedTarget||e.toElement; while(toElement) { if(toElement.id=='PreviewBox') return; toElement=toElement.parentNode; } } try { clearInterval(checkComplete.__timeId); checkComplete.__img=null; previewImage.src=null; } catch(e) {} clearTimeout(previewTimeoutId); previewBox.style.display='none'; } function _showPreview() { checkComplete.__img=new Image(); if(previewFrom.tagName.toUpperCase()=='A') previewFrom=previewFrom.getElementsByTagName('img')[0]; var largeSrc=previewFrom.getAttribute("large-src"); var picLink=previewFrom.getAttribute("pic-link"); if(!largeSrc) return; else { checkComplete.__img.src=largeSrc; checkComplete.href=picLink; checkComplete.__timeId=setInterval("checkComplete()",20); var pos=getPosXY(previewFrom,[106,26]); previewBox.style.left=pos[0]+'px'; previewBox.style.top=pos[1]+'px'; previewBox.style.display='block'; } }
var previewBox = document.getElementById('PreviewBox'); var previewImage = document.getElementById('PreviewImage'); var previewUrl = document.getElementById('previewUrl'); var previewFrom = null; var previewTimeoutId = null; var loadingImg = 'loading.gif';
可以PS人工处理，或者你对image标签进行宽高设置，使用js对小图单击事件，按比例改变他的宽高就可以实现小图切换大图。
不知道怎么个预览，没说清楚。如果是点击小图然后出现大图，方法很多，如准备一大一小图片，css伪类hover更改display，js动态更改图片url等等，不一而论
