效果演示：/slideshow/难点：响应鼠标事件实现滑动效果项目目录：files文件夹下的几个文件夹都是放的图片，fullsize里面是大图，thumbs里面是小图。
其中那个.png文件是测试用的图片页面部分：<html><head><link rel="stylesheet" type="text/css" href="files/style.css" /></head><body><div id="gallery"><div id="imagearea"><div id="image"><!-- 前后翻页的设置--><a href="javascript:slideShow.nav(-1)" class="imgnav " id="previmg"></a><a href="javascript:slideShow.nav(1)" class="imgnav " id="nextimg"></a></div></div><div id="thumbwrapper"><div id="thumbarea"><ul id="thumbs"><!-- span元素的value属性指明与img元素指明的图片的大图文件名匹配，但不包含后缀名,例如第一个span元素表示files/thumbs/1.jpg与aaa.jpg匹配--><span value="aaa"><img src="files/thumbs/1.jpg" width="179" height="100" /></span><span value="bbb"><img src="files/thumbs/2.jpg" width="179" height="100" /></span><span value="ccc"><img src="files/thumbs/3.jpg" width="179" height="100" /></span><span value="ddd"><img src="files/thumbs/4.jpg" width="179" height="100" /></span><span value="eee"><img src="files/thumbs/5.jpg" width="179" height="100" /></span></ul></div></div></div><script type="text/javascript">var imgid = 'image'; //显示大图的divvar imgdir = 'files/fullsize'; //大图的存储文件夹相对路径（相对于js文件）var imgext = '.jpg'; //以.jpg分割文件名数组，也就是图片的后缀名,目前好像还不支持多文// 件名分割var thumbid = 'thumbs'; //显示小图元素的idvar auto = true; //开启自动刷新var autodelay = 5; //间隔时间5秒</script><script type="text/javascript" src="files/slide.js"></script></body></html>css部分：* {margin:0; padding:0;}body {font:12px Verdana, Arial, Helvetica, sans-serif; background:#666 url(images/bg.gif)} #gallery {position:relative; width:686px; margin:40px auto; padding:10px; border:6px solid #fff; background:#AAA}#images {border:2px solid #9ac1c9; height:225px; background:#eef5f6;margin-bottom:20px}#image {position:relative; width:672px; height:375px; padding:5px; border:2px solid #666; background:#FFF url(images/loading.gif) center center no-repeat}#image img {position:absolute; top:5px; left:5px}#thumbwrapper {margin-top:10px; padding:5px 0; width:682px; height:100px; border:2px solid #666; background:#FFF}#thumbarea {position:relative; overflow:hidden; height:100px; width:682px; }#thumbs {position:absolute; list-style:none; margin-left:5px; height:100px; width:10000px; border-right:5px solid #FFF}#thumbs li {float:left; margin-right:5px; cursor:pointer}.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px;width:20%; z-index:100; outline:none; cursor:pointer}#previmg {left:0; background:url(images/left.gif) left center no-repeat; border-left:5px solid #FFF}#previmg:hover {opacity:1; filter:alpha(opacity=100)}#nextimg {right:0; background:url(images/right.gif) right center no-repeat; border-right:5px solid #FFF}#nextimg:hover {opacity:1; filter:alpha(opacity=100)}js部分：var slideShow=function(){var bxs,bxe,fxs,fxe,ys,ye,ta,ia,ie,st,ss,ft,fs,xp,yp,ci,t,tar,tarl;ta=document.getElementById(thumbid); ia=document.getElementById(imgid);t=ta.getElementsByTagName('span'); ie=document.all?true:false;st=3; ss=3; ft=10; fs=5; xp,yp=0;return{init:function(){document.onmousemove=this.pos;window.onresize=function(){setTimeout("slideShow.lim()",500)};ys=this.toppos(ta); ye=ys+ta.offsetHeight;len=t.length;tar=[];for(i=0;i<len;i++){var id=t[i].value; tar[i]=id;t[i].onclick=new Function("slideShow.getimg('"+id+"')");if(i==0){this.getimg(id)}}tarl=tar.length;},scrl:function(d){clearInterval(ta.timer);varl=(d==-1)?0:(t[tarl-1].offsetLeft-(ta.parentNode.offsetWidth-t[tarl-1].offsetWidth)+10) ta.timer=setInterval(function(){slideShow.mv(d,l)},st);},mv:function(d,l){ta.style.left=ta.style.left||'0px';var left=ta.style.left.replace('px','');if(d==1){if(l-Math.abs(left)<=ss){cl(ta.id); ta.style.left='-'+l+'px';}else{ta.style.left=left-ss+'px'}}else{if(Math.abs(left)-l<=ss){cl(ta.id); ta.style.left=l+'px';}else{ta.style.left=parseInt(left)+ss+'px'}}},cncl:function(){clearTimeout(ta.timer)},getimg:function(id){if(auto){clearTimeout(ia.timer)}if(ci!=null){var ts,tsl,x;ts=ia.getElementsByTagName('img'); tsl=ts.length;x=0;for(x;x<tsl;x++){if(ci.id!=id){var o=ts[x]; clearInterval(o.timer);o.timer=setInterval(function(){slideShow.fdout(o)},fs)}}}if(!document.getElementById(id)){var i=document.createElement('img');ia.appendChild(i);i.id=id; i.av=0; i.style.opacity=0;i.style.filter='alpha(opacity=0)';i.src=imgdir+'/'+id+imgext;}else{i=document.getElementById(id); clearInterval(i.timer);}i.timer=setInterval(function(){slideShow.fdin(i)},fs);},nav:function(d){var c=0;for(key in tar){if(tar[key]==ci.id){c=key}}if(tar[parseInt(c)+d]){this.getimg(tar[parseInt(c)+d]);}else{if(d==1){this.getimg(tar[0]);}else{this.getimg(tar[tarl-1])}}},auto:function(){ia.timer=setInterval(function(){slideShow.nav(1)},autodelay*1000)},fdin:function(i){if(plete){i.av=i.av+fs; i.style.opacity=i.av/100;i.style.filter='alpha(opacity='+i.av+')'}if(i.av>=100){if(auto){this.auto()}; clearInterval(i.timer); ci=i} },fdout:function(i){i.av=i.av-fs; i.style.opacity=i.av/100;i.style.filter='alpha(opacity='+i.av+')';if(i.av<=0){clearInterval(i.timer);if(i.parentNode){i.parentNode.removeChild(i)}}},lim:function(){var taw,taa,len; taw=ta.parentNode.offsetWidth; taa=taw/4;bxs=slideShow.leftpos(ta); bxe=bxs+taa; fxe=bxs+taw; fxs=fxe-taa;},pos:function(e){xp=ie?event.clientX+document.documentElement.scrollLeft:e.pageX;yp=ie?event.clientY+document.documentElement.scrollTop:e.pageY;if(xp>bxs&&xp<bxe&&yp>ys&&yp<ye){slideShow.scrl(-1);}else if(xp>fxs&&xp<fxe&&yp>ys&&yp<ye){slideShow.scrl(1);}else{cl()}},leftpos:function(t){var l=0;if(t.offsetParent){while(1){l+=t.offsetLeft; if(!t.offsetParent){break}; t=t.offsetParent} }else if(t.x){l+=t.x}return l;},toppos:function(t){var p=0;if(t.offsetParent){while(1){p+=t.offsetTop; if(!t.offsetParent){break}; t=t.offsetParent} }else if(t.y){p+=t.y}return p;}};}();window.onload=function(){slideShow.init(); slideShow.lim()};。