最近写了个简单的相册效果，不过还有点BUG，没有时间改，先贴出来，大家帮我看看
演示地址:http://www.yaohaixiao.com/code/albums/index.html
代码：
复制内容到剪贴板
代码:
<script language="javascript" type="text/javascript">
<!--
function Albums(){
var hotelName = "凌泷阁餐厅";
var oImgs = document.getElementsByTagName("img"); // 页面所有图片元素
var imgsPath = []; // 所有需要在相册程序中显示的图片路径
var slideImgs = []; // 所有需要在相册程序中显示的图片对象
var slideImgNum = 0; // 需要在相册程序中显示的图片数量
var temIndex = 0; // 相册中当前显示的图片在所有图片中的索引位置
var strIndex = "";
var oShardow = null; // 阴影折照层
var oContainer = null; // 相册容器
var oCurImg = null; // 当前图片（img标签）元素
var oInfoBar = null; // 顶部图片信息栏
var oLogoTxt = null; // LOGO信息（www.fg114.com）栏
var oImgAlt = null; // 图片介绍文字栏
var oCloseBar = null; // 关闭按钮
var oNavBar = null; // 底部导航栏
var oPrePage = null; // 上一页
var oImgIndex = null; // 图片位置索引栏
var oNextPage = null; // 下一页
var imgPath = ""; // 图片路径
var imgAlt = ""; // 图片信息
var logoTxt = "订餐小秘书"; // Logo信息文字
var logoImg = "img/logo.jpg"; // Logo图片
// 信息栏样式
var styleInfoBar = {
position: 'absolute',
width: '100%',
height: '40px',
lineHeight: '40px',
fontSize: '14px',
backgroundColor: '#FFF',
color: '#000',
textAlign: 'center',
overflow: 'hidden',
fontWeight: 'bold'
};
// 可用的样式
var stylePageEnable = {
top: '0',
width: '100px',
cursor: 'pointer',
color: '#000',
textDecoration: 'underline',
fontWeight: 'bold'
};
// 不可用的样式
var stylePageDisable = {
cursor: 'default',
color: '#FFF',
textDecoration: 'none',
fontWeight: 'normal'
};
for(var i=0;i<oImgs.length;i++){
var imgClass = oImgs[i].className || oImgs[i].getAttribute("class");
if(imgClass=="albumsImg"){
imgsPath[i] = oImgs[i].src; // 获得所有图片路径
slideImgs[i] = oImgs[i]; // 获得所有图片对象
oImgs[i].setAttribute("ren",(i+1)); // 设置图片的索引
// 图片点击事件函数
oImgs[i].onclick = function(){
// 获得当前图片路径
imgPath = this.src;
// 获得当前图片的索引位置
temIndex = parseInt(this.getAttribute("ren"));
// 获得当前图片alt属性，作为图片说明
imgAlt = hotelName + "—" + this.getAttribute("alt");
// 执行创建相册容器的DOM闭包函数
(function(){
// 创建阴影层
var shardow = document.createElement("div");
shardow.setAttribute("id","shardow"); // 设置ID值（以便以后对其DOM操作）
// 阴影层样式
var styleShardow = {
height: '100%',
width: '100%',
opacity: .4,
filter: 'alpha(opacity=40)',
position: 'absolute',
background: '#000',
top: '0',
left: '0',
zIndex: 10
};
// 将样式应用到阴影层上
setStyle(shardow,styleShardow);
// 将阴影层追加到文档中
document.body.appendChild(shardow);
// 创建Image对象
var objImg = new Image();
// 设置对象的图片路径
objImg.src = imgPath;
// 获得图片宽度
var imgWidth = objImg.width;
// 获得图片高度
var imgHeight = objImg.height;
// 创建图片容器层
var imgContainer = document.createElement("div");
imgContainer.setAttribute("id","imgContainer");
// 图片容器层样式
var styleContainer = {
position: 'absolute',
border: '5px solid #777',
left: '50%',
top: '50%',
opacity: .1,
filter: 'alpha(opacity=10)',
margin: '-' + (imgHeight/2+10) + 'px 0 0 -' + (imgWidth/2+10) + 'px',
padding: '5px',
background: '#F5F5FE',
zIndex: 11
};
// 应用图片样式
setStyle(imgContainer,styleContainer);
imgContainer.style.height = imgHeight + 'px';
imgContainer.style.width = imgWidth + 'px';
// 将图片容器添加到文档中
document.body.appendChild(imgContainer);
// 创建img标签
var ImgSlide = document.createElement("img");
ImgSlide.setAttribute("src",imgPath);
ImgSlide.setAttribute("id","slideImg");
ImgSlide.setAttribute("alt",imgAlt);
ImgSlide.style.width = imgWidth + "px";
ImgSlide.style.height = imgHeight + "px";
// 将图片添加到图片容器
imgContainer.appendChild(ImgSlide);
// 添加顶部图片信息栏
var infoBar = document.createElement("div");
infoBar.setAttribute("id","infoBar");
var styleTopInfoBar = {
top: '0',
left: '0'
};
setStyle(infoBar,styleInfoBar);
setStyle(infoBar,styleTopInfoBar);
imgContainer.appendChild(infoBar);
// 添加LOGO文字
var oLogo = document.createElement("p");
oLogo.setAttribute("id","logo");
var styleLogoTxt = {
width: '100px',
height: '30px',
top: '5px',
left: '0'
};
setStyle(oLogo,styleInfoBar);
setStyle(oLogo,styleLogoTxt);
var oImgLogo = document.createElement("img");
oImgLogo.setAttribute("id","imgLogo");
oImgLogo.setAttribute("alt",logoTxt);
oImgLogo.setAttribute("src",logoImg);
oImgLogo.src = logoImg;
oLogo.appendChild(oImgLogo);
infoBar.appendChild(oLogo);
// 添加图片说明信息
var imgAltInfo = document.createElement("p");
imgAltInfo.setAttribute("id","imgAltInfo");
var styleAltInfo = {
margin: '0 auto',
width: '100%',
height: '40px',
overflow: 'hidden',
zIndex: 99
};
setStyle(imgAltInfo,styleAltInfo);
var txtAltInfo = document.createTextNode(imgAlt);
imgAltInfo.appendChild(txtAltInfo);
infoBar.appendChild(imgAltInfo);
// 添加关闭按钮
var closeBar = document.createElement("img");
closeBar.setAttribute("id","imgClose");
closeBar.setAttribute("src","img/g_close.gif");
closeBar.src = "img/g_close.gif";
closeBar.setAttribute("alt","关闭窗口");
var styleCloseBar = {
position: 'absolute',
top: '9px',
right: '12px',
cursor: 'pointer',
width: '66px',
height: '22px'
};
setStyle(closeBar,styleCloseBar);
infoBar.appendChild(closeBar);
// 添加底部导航信息
var navBar = document.createElement("div");
navBar.setAttribute("id","navBar");
var styleNavBar = {
bottom: '0',
left: '0'
};
setStyle(navBar,styleInfoBar);
setStyle(navBar,styleNavBar);
imgContainer.appendChild(navBar);
// 上一页
var prePage = document.createElement("p");
prePage.setAttribute("id","prePage");
var stylePrePage = {
left: '0',
zIndex: 99,
width: '70px'
};
setStyle(prePage,styleInfoBar);
setStyle(prePage,stylePageEnable);
setStyle(prePage,stylePrePage);
var txtPrePage = document.createTextNode("上一页");
prePage.appendChild(txtPrePage);
navBar.appendChild(prePage);
var nextPage = document.createElement("p");
nextPage.setAttribute("id","nextPage");
var styleNextPage = {
right: '0',
filter: '',
width: '70px'
};
setStyle(nextPage,styleInfoBar);
setStyle(nextPage,stylePageEnable);
setStyle(nextPage,styleNextPage);
var txtIndex = document.createElement("p");
txtIndex.setAttribute("id","txtIndex");
var styleTxtIndex = {
margin: '0 auto',
width: '100%',
height: '40px',
zIndex: 99,
fontFamily: 'Georgia, sans-serif'
};
setStyle(txtIndex,styleTxtIndex);
strIndex = "共" + slideImgNum + " 张图片 " + temIndex + " / " + slideImgNum;
var textIndex = document.createTextNode(strIndex);
txtIndex.appendChild(textIndex);
navBar.appendChild(txtIndex);
// 下一页
var txtNextPage = document.createTextNode("下一页");
nextPage.appendChild(txtNextPage);
navBar.appendChild(nextPage);
if(temIndex==slideImgNum) setStyle(nextPage,stylePageDisable);
if(temIndex==1) setStyle(prePage,stylePageDisable);
slideUp(imgContainer);
})();
oShardow = document.getElementById("shardow");
oContainer = document.getElementById("imgContainer");
oCurImg = document.getElementById("slideImg");
oInfoBar = document.getElementById("imgAltInfo");
oCloseBar = document.getElementById("imgClose");
oPrePage = document.getElementById("prePage");
oImgIndex = document.getElementById("txtIndex");
oNextPage = document.getElementById("nextPage");
// 设置关闭按钮处理函数
oCloseBar.onclick = function(){
var pos = 100;
var slide = function(){
if(pos <= 5){
if(tt) window.clearInterval(tt);
document.body.removeChild(oContainer);
document.body.removeChild(oShardow);
}
else{
pos -= 5;
setOpacity(oContainer,pos);
}
}
var tt = window.setInterval(slide,50);
}
oPrePage.onclick = function(){
if(temIndex > 1){
if(temIndex == slideImgNum){
oCurImg.setAttribute("src",imgsPath[(temIndex-2)]);
oCurImg.src = imgsPath[(temIndex-2)];
resizeAlbums(oCurImg,oContainer);
oInfoBar.innerHTML = hotelName + "—" + slideImgs[(temIndex-2)].getAttribute("alt");
strIndex = "共" + slideImgNum + " 张图片 " + (temIndex-1) + " / " + slideImgNum;
oImgIndex.innerHTML = strIndex;
setStyle(oNextPage,stylePageEnable);
}
else{
oCurImg.setAttribute("src",imgsPath[temIndex]);
oCurImg.src = imgsPath[temIndex];
resizeAlbums(oCurImg,oContainer);
oInfoBar.innerHTML = hotelName + "—" + slideImgs[temIndex].getAttribute("alt");
strIndex = "共" + slideImgNum + " 张图片 " + (temIndex-1) + " / " + slideImgNum;
oImgIndex.innerHTML = strIndex;
if(temIndex == 1) setStyle(oPrePage,stylePageDisable);
}
}
temIndex-=1;
}
oNextPage.onclick = function(){
if(temIndex != slideImgNum){
oCurImg.setAttribute("src",imgsPath[temIndex]);
oCurImg.src = imgsPath[temIndex];
resizeAlbums(oCurImg,oContainer);
oInfoBar.innerHTML = hotelName + "—" + slideImgs[temIndex].getAttribute("alt");
strIndex = "共" + slideImgNum + " 张图片 " + (temIndex+1) + " / " + slideImgNum;
oImgIndex.innerHTML = strIndex;
if(temIndex != slideImgNum) temIndex += 1;
if(temIndex == slideImgNum) setStyle(oNextPage,stylePageDisable);
if(temIndex!=1) setStyle(oPrePage,stylePageEnable);
}
}
// 除去链接默认的click事件
return false;
}
slideImgNum ++;
}
}
}
function resizeAlbums(oCurImg,oContainer){
var tempImg = new Image();
tempImg.src = oCurImg.src;
var tempWidth = tempImg.width;
var tempHeight = tempImg.height;
oCurImg.style.width = tempWidth;
oCurImg.style.height = tempHeight;
oContainer.style.height = tempHeight + "px";
oContainer.style.width = tempWidth + "px";
oContainer.style.margin = '-' + (tempHeight/2+10) + 'px 0 0 -' + (tempWidth/2+10) + 'px',
slideUp(oContainer);
}
// 设置元素样式
function setStyle(elem,prop){
var old = {};
for(var i in prop){
old[i]=elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
// 通过在短时间内增加透明度逐步显示隐藏元素的函数
function slideUp(elem){
// 从0透明度开始滑动
setOpacity(elem,0);
// 我们在1秒钟内执行一个20帧的动画
for(var i=0;i<=100;i+=5){
// 保证我们能够保持正确的'i'的闭包函数
(function(){
var pos = i;
// 设置 setTimeout 以让它能够在指定点运行
setTimeout(function(){
// 设置元素的透明
setOpacity(elem,pos);
},(pos + 1) * 10);
})();
}
}
// 设置元素透明度(级别从0~100)
function setOpacity(elem,level){
// 如果是IE,所以设置元素的Alpha滤镜
if(elem.style.filter && document.all && !window.opera){
elem.style.filter = "alpha(opacity=" + level + ")";
}
else{
// 否则,使用W3C的opacity属性
elem.style.opacity = level/100;
}
}
//-->
</script>
