发一个自己写的图片浏览程序，以此感谢帮助过小弟我的朋友 _Web前端

发一个自己写的图片浏览程序，以此感谢帮助过我的朋友！
<!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>
?仅供学习参考！