//////////////////////////////////////////////
//作者:Esin @ Memego
//版本:V 0.1 Beta
//////////////////////////////////////////////

//隐藏滚动条
/*
function HiddenScrollBar(){
	var htmlbody = window.navigator.userAgent.indexOf("MSIE")>=1?document.documentElement:document.body;
	htmlbody.style.overflow="hidden";

	//alert(document.getElementsByTagName("select").length);
	for(i=0;i<document.getElementsByTagName("select").length;i++) { 
		document.getElementsByTagName("select")[i].disabled = true;
	}
}
//显示滚动条
function VisibleScrollBar(){
	var htmlbody = window.navigator.userAgent.indexOf("MSIE")>=1?document.documentElement:document.body;
	htmlbody.style.overflow="auto";
	for(i=0;i<document.getElementsByTagName("select").length;i++) { 
		document.getElementsByTagName("select")[i].disabled = false;
	}
}
function Photo(sPhoto,mPhoto,bPhot,desction){
	this.SPhoto=sPhoto;//小图
	this.MPhoto=mPhoto;//中图
	this.BPhoto=bPhot;//大图
	this.Desction=desction;//描述
};

var AlbumObject;//当前的相册对象
function Album(albumName,goLeftImg,goRightImg){
	this.AlbumName=albumName;//相册名
	this.Photos=[];//图片数组
	this.Speed = 50; //速度，越大越慢
	this.Spec = 5; //每次滚动的间距, 越大滚动越快
	this.MinOpa = 50; //滤镜最小值
	this.MaxOpa = 100; //滤镜最大值
	this.Spa = 2; //缩略图区域补充数值
	this.MyMar;//js定时器
	this.GoLeftImg=goLeftImg;//
	this.GoRightImg=goRightImg;//
};
//加图
Album.prototype.AddPhoto=function(sPhoto,mPhoto,bPhoto,desction){
	this.Photos[this.Photos.length]=new Photo(sPhoto,mPhoto,bPhoto,desction)
};
//左走
Album.prototype.GoLeft=function() {
	document.getElementById(AlbumObject.AlbumName+'_photos').scrollLeft -= AlbumObject.Spec;
	
};
//右走
Album.prototype.GoRight=function() {
	document.getElementById(AlbumObject.AlbumName+'_photos').scrollLeft += AlbumObject.Spec;;
};
//设置小图的透明度
Album.prototype.SetOpacity=function(obj, n) {
    if ( window.navigator.appName.toLowerCase().indexOf("microsoft") > -1) obj.style.filter = 'alpha(opacity=' + n + ')';
    else obj.style.opacity = n/100;
};
//显示中图
Album.prototype.ShowMediumPhoto=function(num){
	var thisAlbum=this;
	document.getElementById(this.AlbumName+"_mPhoto").src=this.Photos[num].MPhoto;
	document.getElementById(this.AlbumName+"_mPhoto").onclick=function(){
		thisAlbum.ShowBigPhoto(num);
	}
	
	for(var i=0;i<this.Photos.length;i++){	
		document.getElementById(this.AlbumName+"_photo_"+i).onmouseout=function(){
			thisAlbum.SetOpacity(this,thisAlbum.MinOpa);
		};
		this.SetOpacity(document.getElementById(this.AlbumName+"_photo_"+i),this.MinOpa);
	}
	document.getElementById(this.AlbumName+"_photo_"+num).onmouseout='';
	this.SetOpacity(document.getElementById(this.AlbumName+"_photo_"+num),this.MaxOpa);
}
//显不大图
Album.prototype.ShowBigPhoto=function(num) {
    document.getElementById(AlbumObject.AlbumName+'_bPhoto').src=this.Photos[num].BPhoto;
	document.getElementById(AlbumObject.AlbumName+'_BPhotoDiv').style.display="block";
	//隐藏滚动条
	HiddenScrollBar();
	
	AlbumObject.SetPopupSize();
};
//设置锁屏的尺寸
Album.prototype.SetPopupSize=function(){
	
	//求窗的的尺寸
    var w = (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth;
	
    var h = (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight;

	//显示大图的位置
    document.getElementById(AlbumObject.AlbumName+'_BigPhoto_Span').style.left=
		(w-document.getElementById(AlbumObject.AlbumName+'_BigPhoto_Span').clientWidth)/2+"px";

	document.getElementById(AlbumObject.AlbumName+'_BigPhoto_Span').style.top=
		(h-document.getElementById(AlbumObject.AlbumName+'_BigPhoto_Span').clientHeight)/2+"px";

	//求内容的尺寸
	if(w<document.body.offsetWidth)
		w=document.body.offsetWidth;
	if(h< document.body.offsetHeight)
		h= document.body.offsetHeight;

	//销屏的尺寸
	document.getElementById(AlbumObject.AlbumName+'_Popup_bg').style.width=w+"px";
	document.getElementById(AlbumObject.AlbumName+'_Popup_bg').style.height=h+"px";

}
//生成相册
Album.prototype.Show = function() {
	AlbumObject=this;
	var photoStr='';
	var photoWidth=0;
	var heavyImage = new Image();
    for(var i=0 ;i<this.Photos.length;i++){
		heavyImage.src=this.Photos[i].SPhoto;
		heavyImage.src=this.Photos[i].MPhoto;
		heavyImage.src=this.Photos[i].BPhoto;

		photoStr+="<img id=\""+this.AlbumName+"_photo_"+i+"\" src=\""+this.Photos[i].SPhoto+"\" width='85' alt=\""+this.Photos[i].Desction
		+"\" style='display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222;-moz-opacity:"+(this.MinOpa/100)+";filter:alpha(opacity="+this.MinOpa+");'"+
		" onclick='AlbumObject.ShowMediumPhoto("+ i +")' onmouseover='AlbumObject.SetOpacity(this,"+this.MaxOpa+
		");'  onmouseout='AlbumObject.SetOpacity(this,"+this.MinOpa+");'/>";
		photoWidth +=80;
    }
	var html="<div id=\""+this.AlbumName+"\" style=\"margin:20px auto;\">"+
	   " <div id=\""+this.AlbumName+"_mainbody\" style=\"margin:5px;padding:1px;\">"+
       "<img id=\""+this.AlbumName+"_mPhoto\" width='294' style='cursor:pointer;'/></div>"+    
       "<img src=\""+this.GoLeftImg+"\" id=\""+
	   this.AlbumName+"_goleft\" style=\"float:left;clear:left;margin:23px 5px 0 3px;cursor:pointer;\" />"+
       "<img src=\""+this.GoRightImg+"\" id=\""+
	   this.AlbumName+"_goright\" style=\"float:right;clear:right;margin:23px 3px 0 5px;cursor:pointer;\"/>"+
	   "<div id=\""+this.AlbumName+"_photos\" style=\"width:260px;height:61px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden ;\">"+
       "<div id=\""+this.AlbumName+"_showArea\">"+ photoStr+ "</div></div></div><!-锁屏显示大图---><div id=\""+ this.AlbumName+"_BPhotoDiv\" "+
	   "style=\"display:none;cursor:pointer;\" onclick=\"this.style.display='none';VisibleScrollBar();\" ><span id=\""+ 
	   this.AlbumName+"_BigPhoto_Span\" style=\"position:absolute;z-index:10001;\" ><img id='"+ 
	   this.AlbumName+"_bPhoto' src=''  /></span><div id=\""+ this.AlbumName+"_Popup_bg\" "+
	   "style='top:0;left:0;z-index:10000;position:absolute;background:#ccc;filter:alpha(opacity=40);-moz-opacity:0.4;'></div></div>";
	  
	  document.write(html);

	  //设置小图的总宽度
	  document.getElementById(this.AlbumName+'_showArea').style.width =photoWidth+'px';
	  //设置第一张图
	  this.ShowMediumPhoto(0);
	  //设置左右两边的小图事件
	  document.getElementById(this.AlbumName+'_goleft').onmouseover=function(){AlbumObject.MyMar=setInterval(AlbumObject.GoLeft, AlbumObject.Speed);}
	  document.getElementById(this.AlbumName+'_goleft').onmouseout=function(){ clearInterval(AlbumObject.MyMar);}
	  document.getElementById(this.AlbumName+'_goright').onmouseover=function(){AlbumObject.MyMar=setInterval(AlbumObject.GoRight, AlbumObject.Speed);}
	  document.getElementById(this.AlbumName+'_goright').onmouseout=function(){clearInterval(AlbumObject.MyMar);}
	  
	  if(window.attachEvent){
			window.attachEvent("onresize",AlbumObject.SetPopupSize);
	  }else if(window.addEventListener){
			window.addEventListener("onresize",AlbumObject.SetPopupSize,false);
	  }
};




例子:

album=new Album("myAlbum","http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif","http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif");
album.AddPhoto("img/200652771451763.jpg","img/200652771454198.jpg","img/200652771454198.jpg","test");
album.AddPhoto("img/200652771551420.jpg","img/200652771554747.jpg","img/200652771554747.jpg","test");
album.AddPhoto("img/200652881940161.jpg","img/200652881944406.jpg","img/200652881944406.jpg","test");
album.AddPhoto("img/2006530111742521.jpg","img/200652882112804.jpg","img/200652882112804.jpg","test");
album.AddPhoto("img/2006530112029439.jpg","img/2006530111750266.jpg","img/2006530111750266.jpg","test");

album.AddPhoto("img/200652771451763.jpg","img/200652771454198.jpg","img/200652771454198.jpg","test");
album.AddPhoto("img/200652771551420.jpg","img/200652771554747.jpg","img/200652771554747.jpg","test");
album.AddPhoto("img/200652881940161.jpg","img/200652881944406.jpg","img/200652881944406.jpg","test");
album.AddPhoto("img/2006530111742521.jpg","img/200652882112804.jpg","img/200652882112804.jpg","test");
album.AddPhoto("img/2006530112029439.jpg","img/2006530111750266.jpg","img/2006530111750266.jpg","test");

album.AddPhoto("img/200652771451763.jpg","img/200652771454198.jpg","img/200652771454198.jpg","test");
album.AddPhoto("img/200652771551420.jpg","img/200652771554747.jpg","img/200652771554747.jpg","test");
album.AddPhoto("img/200652881940161.jpg","img/200652881944406.jpg","img/200652881944406.jpg","test");
album.AddPhoto("img/2006530111742521.jpg","img/200652882112804.jpg","img/200652882112804.jpg","test");
album.AddPhoto("img/2006530112029439.jpg","img/2006530111750266.jpg","img/2006530111750266.jpg","test");

album.AddPhoto("img/200652771451763.jpg","img/200652771454198.jpg","img/200652771454198.jpg","test");
album.AddPhoto("img/200652771551420.jpg","img/200652771554747.jpg","img/200652771554747.jpg","test");
album.AddPhoto("img/200652881940161.jpg","img/200652881944406.jpg","img/200652881944406.jpg","test");
album.AddPhoto("img/2006530111742521.jpg","img/200652882112804.jpg","img/200652882112804.jpg","test");
album.AddPhoto("img/2006530112029439.jpg","img/2006530111750266.jpg","img/2006530111750266.jpg","test");

album.Show();
*/
function GetObj(objName){
	if(document.getElementById){
		return eval('document.getElementById("' + objName + '")');
	}else if(document.layers){
		return eval("document.layers['" + objName +"']");
	}else{
		return eval('document.all.' + objName);
	}
} 
var PreloadImg = function(){
	var preloadImages = new Array();
	for(var i=0;i<arguments.length;i++){
		preloadImages[0] = new Image();
		preloadImages[0].src = arguments[i];
	}
}
function SetLbl(objId, cClass, cCon, hCon, dCon){
	GetObj(objId).className = cClass;
	GetObj(cCon).style.display = "block";
	GetObj(hCon).style.display = "none";
	GetObj(dCon).style.display = "none";
}   
PreloadImg()
function SetLb(objId, aClass, aCon, bCon){
	GetObj(objId).className = aClass;
	GetObj(aCon).style.display = "block";
	GetObj(bCon).style.display = "none";
} 
function mover(src,clrOver){ 
	src.bgColor = clrOver; 
}
function mout(src,clrout)  { 
	src.bgColor = clrout; 
}
function showMoreOption(obj,showA,hiddA)
{
    var ss=document.getElementById(obj);
	var show=document.getElementById(showA);
	var hidd=document.getElementById(hiddA);
    ss.style.display="block";
	hidd.style.display="block";
	show.style.display="none";
}
function hiddMoreOption(obj,showA,hiddA)
{
    var ss=document.getElementById(obj);
	var show=document.getElementById(showA);
	var hidd=document.getElementById(hiddA);
    ss.style.display="none";
	hidd.style.display="none";
	show.style.display="block";
}