一个简单的相册效果，简单但兼容性好

    之前就写好了这个小程序，不过之前在向上翻页的时候有BUG，今天休正了，并且简单的封装了一下，不过动画的效果还不是那么眩。但是个人觉得已经够用了，而且兼容性还不错，我在Windows下的FF2。0~3。0，IE 6.0~8.0,Opera9.x,Netscape8.1和safari3.1都测试通过了。

演示地址:http://www.yaohaixiao.com/code/albums/index.html/

**
* @author robert
*/
var Albums = {
    oImgs: document.getElementsByTagName("img"),     // 页面中所有需要显示的图片对象（img标签）
    oAlbumsImgs: new Array(),                        // 所有需要在相册中显示图片的对象   
    oAlbumsPath: new Array(),                        // 所有需要在相册中显示图片的路径
   
    oShardow: null,                                  // 阴影层
    oImgContainer: null,                             // 相册容器层
    oCurrentImg: null,                               // 当前显示的图片对象（img标签） 
    oInfoBar: null,                                  // 相册顶部信息条
    oNavBar: null,                                   // 相册底部导航条
    oLogoBar: null,                                  // 相册Logo容器 
    oTxtInfo: null,                                  // 图片简介信息容器
    oCloseBar: null,                                 // 关闭按钮
    oPrePage: null,                                  // 上一页
    oTxtIndex: null,                                 // 图片索引信息容器
    oNextPage: null,                                 // 下一页
   
    sLogoPath: "img/logo.jpg",                       // 相册Logo地址
   
    sTxtPrePage: "上一页",     
    sImgCount: "",                                   // 图片总数量
    sTxtNextPage: "下一页",
   
    sCurrentTxtIndex: 0,                             // 当前图片在oAlbumsImgs中的索引信息 
    sCurrentImgPath: "",                             // 当前显示图片的路径
    sCurrentImgAlt: "",                              // 当前图片的（Alt）简介信息
    sIndex: 0,                                       // 当前索引
    sTxtIndexInfo: "",                               // 完整的索引信息
   
    // 阴影层样式
    styleShardow: {
           height: '100%',
            width: '100%',
          opacity: .4, 
           filter: 'alpha(opacity=40)',
         position: 'absolute',
  backgroundColor: '#000',
              top: '0',
             left: '0',
           zIndex: 10
    },
   
    // 相册容器样式  
    styleContainer: {
         position: 'absolute',
           border: '5px solid #777',
             left: '50%',
              top: '50%',
          opacity: .1,
           filter: 'alpha(opacity=10)',
          padding: '5px',
       background: '#F5F5FE',
           zIndex: 11
    },
   
    // 信息栏样式
    styleInfoBar: {
         position: 'absolute',
              top: '0',
             left: '0',
           height: '40px',
       lineHeight: '40px',
         fontSize: '14px',
  backgroundColor: '#FFF',
            color: '#000',
        textAlign: 'center',
         overflow: 'hidden',       
       fontWeight: 'bold'
    },
  
   // 导航栏样式
   styleNavBar: {
         position: 'absolute',
           bottom: '0',
             left: '0',
           height: '40px',
       lineHeight: '40px',
         fontSize: '14px',
  backgroundColor: '#FFF',
            color: '#000',
        textAlign: 'center',
         overflow: 'hidden',       
       fontWeight: 'bold'
   },
   
   // 图片信息说明样式
   styleAltInfo: {
          margin: '0 auto',
           width: '100%',
          height: '40px',
      lineHeight: '40px',
        fontSize: '14px',
      fontWeight: 'bold',
        overflow: 'hidden'
   }, 
   
    // 相册LOGO样式
    styleLogo: {
         position: 'absolute',
            width: '100px',
           height: '30px',
              top: '5px',
             left: '5px' 
    },
   
    // 关闭按钮样式
    styleCloseBar: {
         position: 'absolute',    
              top: '9px',
            right: '12px',
           cursor: 'pointer',
            width: '66px',
           height: '22px'
    },
   
    // 上一页样式
    stylePrePage: {
         position: 'absolute',
              top: '0',
             left: '0',
           height: '40px',
       lineHeight: '40px',
         fontSize: '14px',
  backgroundColor: '#FFF',
            color: '#000',
        textAlign: 'center',
         overflow: 'hidden',       
       fontWeight: 'bold',
           zIndex: 99,
            width: '70px',
   textDecoration: 'underline',
           cursor: 'pointer'
    },
   
    // 下一页样式
    styleNextPage: {
         position: 'absolute',
              top: '0',
            right: '0',
           height: '40px',
       lineHeight: '40px',
         fontSize: '14px',
  backgroundColor: '#FFF',
            color: '#000',
        textAlign: 'center',
         overflow: 'hidden',       
       fontWeight: 'bold',
           zIndex: 99,
            width: '70px',
   textDecoration: 'underline',
           cursor: 'pointer'
    },
   
    // 可用的样式
    stylePageEnable: {
            color: '#000',
   textDecoration: 'underline',
           cursor: 'pointer'
    },
   
    // 不可用的样式
    stylePageDisable: {
           cursor: 'default',
            color: '#CCC',
   textDecoration: 'none'
    },
   
    init: function(){
        for(var i=0;i<this.oImgs.length;i++){
            // 获得所有图片（img标签）的（className）样式
            var imgClass = this.oImgs[i].className || this.oImgs[i].getAttribute("class");
           
            // 如果图片样式为“albumsImg”，则将改图片添加到oAlbumsImgs数组中
            if(imgClass=="albumsImg"){
                this.oAlbumsPath[i] = this.oImgs[i].src;    // 获得所有图片路径
                this.oAlbumsImgs[i] = this.oImgs[i];        // 获得所有图片对象          
                this.oAlbumsImgs[i].setAttribute("rel",i);  // 为图片设置（rel属性）索引               
                this.sImgCount = this.oAlbumsImgs.length;   // 获得要显示到相册中的图片总数
               
                this.oAlbumsImgs[i].onclick = function(){
                     var o = Albums;
                     var curPath = o.sCurrentImgPath = this.src;                              // 获得当前点击图片的路径
                     var curIndex = o.sCurrentTxtIndex = parseInt(this.getAttribute("rel"));  // 获得当前点击图片的索引值
                     o.sIndex = curIndex + 1;                                                 // 索引值
                     var curAlt = o.sCurrentImgAlt = this.getAttribute("alt");                // 获取当前图片简介信息
                     var txtIndex = (curIndex+1) + " / " + o.sImgCount;               
                    
                     var objImg = new Image();            // 创建Image对象
                         objImg.src = curPath;            // 给Image对象设置路径（从而获得图片的宽和高）   
                     var curImgWidth = objImg.width;      // 获得当前图片宽
                     var curImgHeight = objImg.height;    // 获得当前图片高
                    
                     // 执行创建相册DOM容器的闭包函数
                     (function(){
                          // 创建阴影层
                          var shardow = document.createElement("div");
                             shardow.setAttribute("id","shardow");
                         // 将样式应用到阴影层上
                         o.setStyle(shardow,o.styleShardow);
                         // 将阴影层追加到文档中
                         document.body.appendChild(shardow);
                        
                         // 创建（img标签）图片
                         var curImg    = document.createElement("img");
                             curImg.setAttribute("id","curimg");
                             curImg.setAttribute("alt",curAlt);
                             curImg.setAttribute("src",curPath);
                             curImg.src = curPath;
                        
                         // 创建相册容器层
                         var container = document.createElement("div");
                             container.setAttribute("id","container");
                             container.style.margin = '-' + (curImgHeight/2+10) + 'px 0 0 -' + (curImgWidth/2+10) + 'px';
                         // 将样式应用到相册容器层上
                         o.setStyle(container,o.styleContainer);
                         // 将图片添加到相册容器上
                         container.appendChild(curImg);
                        
                         // 创建信息栏
                         var infobar = document.createElement("div");
                             infobar.setAttribute("id","infobar");
                             infobar.style.width = (curImgWidth + 10) + "px";
                         // 将样式应用到信息栏上
                         o.setStyle(infobar,o.styleInfoBar);
                        
                         // 创建图片信息条
                         var imginfo = document.createElement("p");
                             imginfo.setAttribute("id","imginfo");
                         o.setStyle(imginfo,o.styleAltInfo);
                         // 创建提示信息文本
                         var txtAltInfo = document.createTextNode(curAlt); 
                         // 将文本信息添加到信息条中
                         imginfo.appendChild(txtAltInfo);
                         // 将信息条添加到信息栏中去
                         infobar.appendChild(imginfo);                          
                        
                         // 创建LOGO信息层
                         var albumsLogo = document.createElement("img");
                             albumsLogo.setAttribute("id","logo");
                             albumsLogo.setAttribute("alt","订餐小秘书");
                             albumsLogo.setAttribute("src",o.sLogoPath);
                             albumsLogo.src = o.sLogoPath;
                         // 将样式应用到LOGO上
                         o.setStyle(albumsLogo,o.styleLogo);
                         // 将LOGO添加到信息栏中
                         infobar.appendChild(albumsLogo);
                        
                         // 创建关闭按钮
                         var closebar = document.createElement("img");
                             closebar.setAttribute("id","closebar");
                             closebar.setAttribute("src","img/g_close.gif");
                             closebar.src = "img/g_close.gif";
                             closebar.setAttribute("alt","关闭窗口");
                         o.setStyle(closebar,o.styleCloseBar);
                         // 将关闭按钮添加到信息栏中
                         infobar.appendChild(closebar);
                        
                         // 将信息栏添加到相册容器上
                         container.appendChild(infobar);
                        
                         // 创建底部导航信息栏
                         var navbar = document.createElement("div");
                             navbar.setAttribute("id","navbar");
                             navbar.style.width = (curImgWidth + 10) + "px";
                         // 将导航栏样式应用到该层    
                         o.setStyle(navbar,o.styleNavBar); 
                        
                         // 创建图片索引信息导航条
                         var txtIndex = document.createElement("p");
                             txtIndex.setAttribute("id","txtindex");
                         // 将样式应用到信息条上    
                         o.setStyle(txtIndex,o.styleAltInfo);
                         // 获得完整的索引信息
                         o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + o.sIndex + " / " + o.sImgCount; 
                         // 创建索引信息文本
                         var textIndex = document.createTextNode(o.sTxtIndexInfo);
                         // 将文本追加到信息条中
                         txtIndex.appendChild(textIndex);
                         // 将索引信息条添加到导航信息栏中
                         navbar.appendChild(txtIndex); 
                        
                         // 创建上一页导航
                         var prePage = document.createElement("p");
                             prePage.setAttribute("id","prePage");
                         // 将样式应用到上一页导航上
                         o.setStyle(prePage,o.stylePrePage);
                         // 创建上一页导航文本
                         var txtPrePage = document.createTextNode(o.sTxtPrePage);
                         prePage.appendChild(txtPrePage);
                         // 将文本追加到导航上    
                         navbar.appendChild(prePage);
                        
                        
                        
                         // 创建下一页导航
                         var nextPage = document.createElement("p");
                             nextPage.setAttribute("id","nextPage");
                         // 将样式应用到该层上
                         o.setStyle(nextPage,o.styleNextPage);
                         // 创建下一页导航文本
                         var txtNextPage = document.createTextNode(o.sTxtNextPage);
                         nextPage.appendChild(txtNextPage);
                         // 将文本追加到导航中
                         navbar.appendChild(nextPage);
                        
                         // 将导航栏添加到相册容器中
                         container.appendChild(navbar);
                        
                         // 将相册容器添加到文档中
                         document.body.appendChild(container);   
                         
                             o.oShardow = shardow;
                             o.oCurrentImg = curImg;
                             o.oImgContainer = container;
                             o.oInfoBar = infobar;
                             o.oTxtInfo = imginfo;
                             o.oCloseBar = closebar;
                             o.oNavBar = navbar;
                             o.oPrePage = prePage;
                             o.oTxtIndex = txtIndex;
                             o.oNextPage = nextPage;
                        
                         // 根据索引控制翻页导航是否可用
                         if (o.sIndex == o.sImgCount) {
                             o.setStyle(nextPage, o.stylePageDisable);      // 最后一张时，下一页按钮不可用
                         }
                         else {
                             if (o.sIndex == 1)
                                 o.setStyle(prePage, o.stylePageDisable);   // 第一张时，上一页按钮不可用
                         }
                        
                         // 给相册层添加逐渐显示的动画效果
                         o.slideUp(container);
                        
                         closebar.onclick = o.close;
                         nextPage.onclick = o.next;
                          prePage.onclick = o.previous;
                     })();
                    
                     return false;  // 消除A标签默认动作
                }
            }
        }
    },
   
    // 关闭相册
    close: function(){
        var pos = 100;
        var o = Albums;
                         
        var slide = function(){
            if(pos <= 5){
                   if(tt) window.clearInterval(tt);
                           document.body.removeChild(o.oImgContainer);
                           document.body.removeChild(o.oShardow);   
                   }
                   else{
                           pos -= 5;   
                           o.setOpacity(o.oImgContainer,pos);
                   }
        }
        var tt = window.setInterval(slide,50);
    },
   
    // 显示下一张图片
    next: function(){
        var o = Albums;
        var temIndex = o.sIndex + 1;
        // 如果当前图片不是最后一张
        if(o.sIndex != o.sImgCount){
             // 将下一张图片的路径更换到当前显示（img标签）图片中（标准的DOM方法）
             o.oCurrentImg.setAttribute("src",o.oAlbumsPath[o.sIndex]);
             // BOM的方法
             o.oCurrentImg.src = o.oAlbumsPath[o.sIndex];
             // 将图片说明信息写到图片信息条中           
             o.oTxtInfo.innerHTML = o.oAlbumsImgs[o.sIndex].getAttribute("alt");
             // 获得当前图片的索引信息
             o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + temIndex + " / " + o.sImgCount;
             // 将索引信息写到索引信息条中           
             o.oTxtIndex.innerHTML = o.sTxtIndexInfo;
             // 重新调整相册层的大小，以适应新图片的尺寸           
             o.resize(o.oCurrentImg,o.oImgContainer,o.oInfoBar,o.oNavBar);
             // 给重新调整后的相册层添加逐渐显示的动画效果
             o.slideUp(o.oImgContainer);
            
             o.sIndex++;  // 移到下一张的索引
            
             // 上一页按钮可用
             o.setStyle(o.oPrePage, o.stylePageEnable);
             // 当图片转到最后一张时，下一页按钮不可用
             // 不要奇怪因为前面o.sIndex++，所以原本o.sIndex==11(o.sIndex != o.sImgCount)成立
             // 而++后，现在o.sIndex==o.sImgCount(12)，也就是到了最后一张图片了
             if(o.sIndex == o.sImgCount) o.setStyle(o.oNextPage,o.stylePageDisable);
        }
    },
   
    // 显示上一张图片
    previous: function(){
        var o = Albums;
        var temIndex = o.sIndex - 1;
        //如果不是最后一张和第一张图片
        if(o.sIndex > 1){
             // 将下一张图片的路径更换到当前显示（img标签）图片中（标准的DOM方法）
             o.oCurrentImg.setAttribute("src",o.oAlbumsPath[o.sIndex-2]);
             // BOM的方法
             o.oCurrentImg.src = o.oAlbumsPath[o.sIndex-2];
             // 将图片说明信息写到图片信息条中           
             o.oTxtInfo.innerHTML = o.oAlbumsImgs[o.sIndex-2].getAttribute("alt");
             // 获得当前图片的索引信息
             o.sTxtIndexInfo = "共" + o.sImgCount + " 张图片 " + temIndex + " / " + o.sImgCount;
             // 将索引信息写到索引信息条中           
             o.oTxtIndex.innerHTML = o.sTxtIndexInfo;
             // 重新调整相册层的大小，以适应新图片的尺寸           
             o.resize(o.oCurrentImg,o.oImgContainer,o.oInfoBar,o.oNavBar);
             // 给重新调整后的相册层添加逐渐显示的动画效果
             o.slideUp(o.oImgContainer);
            
             o.sIndex--;  // 移到上一张的索引
            
             // 下一页按钮可用
             o.setStyle(o.oNextPage, o.stylePageEnable);
             // 如果转到第一张图片，上一页按钮不可用
             if (o.sIndex == 1) o.setStyle(o.oPrePage, o.stylePageDisable);
        }
    },
   
    // 重新刷新相册容器
    resize: function(oCurImg,oContainer,oInfoBar,oNavBar){
         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';
        
         oInfoBar.style.width = (tempWidth + 10) + "px";
         oNavBar.style.width = (tempWidth + 10) + "px";
     },
     // 设置元素样式
     setStyle: function(elem,prop){
         var old = {};
         for(var i in prop){
               old[i]=elem.style[i];
             elem.style[i] = prop[i];   
         }
         return old;
     },
     // 通过在短时间内增加透明度逐步显示隐藏元素的函数
     slideUp: function(elem){
         // 从0透明度开始滑动
         this.setOpacity(elem,0);
   
         // 我们在1秒钟内执行一个20帧的动画
         for(var i=0;i<=100;i+=5){
             // 保证我们能够保持正确的'i'的闭包函数
             (function(){
                  var pos = i;
                  var o = Albums;
                  // 设置 setTimeout 以让它能够在指定点运行
                  setTimeout(function(){
                         // 设置元素的透明
                         o.setOpacity(elem,pos);
                  },(pos + 1) * 10);
             })();   
         }   
     },
     // 设置元素透明度(级别从0~100)
     setOpacity: function(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;
         }
     }
}