发一个自己写的图片浏览程序，以此感谢帮助过我的朋友！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns=" http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><title>图片浏览程序，感谢LovelyStar,丸子，感谢BI的热心朋友们</title><style type="text/css">* { margin:0; padding:0; font-size:12px; }#pic { width:800px; height:600px; line-height:600px; text-align:center; }#Block { width:800px; height:700px; position:relative; }#pic img { width:800px; height:600px; display:block; }#Block a { cursor:pointer; text-decoration:none; width:120px; height:90px; display:inline-block; overflow:hidden; position:relative; }#Block a span{position:absolute; top:2px; left:2px; background:white; padding:1px;}#Block a.over { background:red; color:red; padding:2px; }#Block a img{width:120px; height:90px;}#sPic{ float:left;border:1px solid #d2d2d2;}#la{ width:40px; height:60px; position:absolute; left:0; top:300px; background:#fff url(http://www.dtonecn.com/works/left.png) no-repeat center;cursor:pointer; }#ra {width:40px; height:60px; right:0; top:300px; position:absolute;background:#fff url(http://www.dtonecn.com/works/right.png) no-repeat center;cursor:pointer; }#lscroll{width:20px; height:94px; float:left; background:#f9f9f9 url(http://www.dtonecn.com/works/sleft.png) no-repeat center; display:inline;cursor:pointer;}#rscroll{width:20px; height:94px;float:right; background:#f9f9f9 url(http://www.dtonecn.com/works/sright.png) no-repeat center;display:inline; cursor:pointer;}</style></head><body><div id="Block"> <div id="pic"> </div> <div id="sPic"><div id="lscroll"></div><div id="rscroll"></div> <!--这是空心的a,对SEO无意义，我为下面的DOM操作测试一下而已--> <a></a> <a ></a> <a ></a> <a></a> <a></a> <a></a> <a></a> </div> <div id="la"></div> <div id="ra"></div></div><script>var picSrc={bigPic:["http://comic.qq.com/images/comic/2010/02/01/jo/01.jpg","http://comic.qq.com/images/comic/2010/02/01/jo/02.jpg","http://comic.qq.com/images/comic/2010/02/01/jo/03.jpg","http://comic.qq.com/images/comic/2010/02/01/jo/04.jpg","http://comic.qq.com/images/comic/2010/03/11/jo/01.jpg","http://comic.qq.com/images/comic/2010/03/11/jo/02.jpg","http://comic.qq.com/images/comic/2010/03/11/jo/03.jpg"],smallPic:["http://img1.gtimg.com/comic/pics/hv1/91/225/542/35301016.jpg","http://img1.gtimg.com/comic/pics/hv1/83/225/542/35301008.jpg","http://img1.gtimg.com/comic/pics/hv1/87/225/542/35301012.jpg","http://img1.gtimg.com/comic/pics/hv1/81/225/542/35301006.jpg","http://img1.gtimg.com/comic/pics/hv1/85/225/542/35301010.jpg","http://img1.gtimg.com/comic/pics/hv1/89/225/542/35301014.jpg","http://img1.gtimg.com/comic/pics/hv1/93/225/542/35301018.jpg"]};var count=6;var href=document.getElementsByTagName("a");var showPic=document.getElementById("showPic");var picBlock=document.getElementById("pic");var img=new Image();//大图var smImg=new Image();//小图var imgElem=document.createElement('img'); var j=0;var flag = true;var t=null; var intTimeStep=20;var intAlphaStep=0.05; var curOpacity=null;var la=document.getElementById("la");var ra=document.getElementById("ra");var ls=document.getElementById("lscroll");var rs=document.getElementById("rscroll");picBlock.innerHTML="图片加载中……";//遍历所有数字按钮，并添加点击事件for(var i=0;i<href.length;i++){//这个闭包有没有影响性能？什么情况下才可以用到闭包？(function(n){var sn=document.createElement("span");var txt=document.createTextNode((n+1)+"/"+href.length);sn.appendChild(txt);href[i].appendChild(sn);//这里想把小图弄成分别加载的方式，希望提供思路var spic=document.createElement("img");smImg.src=picSrc.smallPic[n];spic.src=smImg.src;href[n].appendChild(spic);if(n>=count)href[n].style.display="none"; href[n].onclick=function(){if(imgElem==null)return false;handlePic(n);j=n;} })(i);}//开始展示第一张img.src = picSrc.bigPic[0];picBlock.innerHTML="";imgElem.src=img.src;picBlock.appendChild(imgElem);setObjState();href[0].className="over";//向右点击循环播放ra.onclick=rs.onclick=function(e){j=j+1;if(j>=href.length){//if(window.confirm("这是最后一张了，您要继续吗?")){j=0;href[j].style.display="inline-block";href[j+count].style.display="none";//}//else//{//j=href.length-1;//return false;//}} if(j>=count){href[j].style.display="inline-block";href[j-count].style.display="none";}handlePic(j);}//向左点击循环播放la.onclick=ls.onclick=function(){j=j-1;if(j<0){j=href.length-1;href[j-count].style.display="none";href[j].style.display="inline-block";}if(j==0){href[j+count].style.display="none";href[j].style.display="inline-block";}handlePic(j);}function handlePic(whichPic){ var whichPic=whichPic; var target=picSrc.bigPic[whichPic]; img.onload=function(){ if(img.complete){ picBlock.innerHTML=""; imgElem.src=img.src; picBlock.appendChild(imgElem); setObjState(); for(var m=0;m<href.length;m++){ href[m].className="";} //给当前a添加样式 href[whichPic].className="over"; } } picBlock.innerHTML="图片加载中……"; img.src=target;};//设置图片的初始透明度function setObjState() { if(imgElem==null)return false;imgElem.style.filter='alpha(opacity=0)';imgElem.style.opacity=0; imgElem.style.display=''; curOpacity=0; setObjOpen(); } //图片开始淡入function setObjOpen() { if(imgElem==null)return false; curOpacity+=intAlphaStep; imgElem.style.filter='alpha(opacity='+(curOpacity*100)+')'; imgElem.style.opacity =curOpacity; if (curOpacity<1) setTimeout('setObjOpen()',intTimeStep); } </script></body></html>?仅供学习参考！