JS写的一个相册

// JavaScript template using Windows Script Host
var WSHShell = WScript.CreateObject("WScript.Shell");
WSHShell.Popup( "Hello World!" );
myLib.Albums = {
        oImgs: document.getElementsByTagName("img"),     // 页面中所有需要显示的图片对象（img标签）
        oAlbumsImgs: new Array(),                        // 所有需要在相册中显示图片的对象   
        oAlbumsPath: new Array(),                        // 所有需要在相册中显示图片的路径
        pathIndex: 0,
       
        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: "",                               // 完整的索引信息
       
        stylePageEnable: {
                     color: "#000",
            textDecoration: "underline",
                    cursor: "pointer"
    },
       
        stylePageDisable: {
                     color: "#CCC",
            textDecoration: "none",
                    cursor: "default"
    },
       
        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[this.pathIndex] = this.oImgs[i].src;    // 获得所有图片路径
                    this.oAlbumsImgs[this.pathIndex] = this.oImgs[i];        // 获得所有图片对象          
                                this.oAlbumsImgs[this.pathIndex].setAttribute("rel",this.pathIndex);  // 为图片设置（rel属性）索引                               
                                this.sImgCount = this.oAlbumsImgs.length;   // 获得要显示到相册中的图片总数
       
                                this.oAlbumsImgs[this.pathIndex].onclick = function(){
                                         var o = myLib.Albums;
                                         var dom = myLib.Dom;
                                         var com = myLib.Com;
                                        
                                         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;       
                                        
                                         // 执行创建相册DOM容器的闭包函数
                                         (function(){
                                                  // 创建阴影层
                                                  var shardow = document.createElement("div");
                                                     shardow.setAttribute("id","shardow");
                                                 // 将样式应用到阴影层上
                         dom.className.add(shardow,"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","albumscontainer");
                                             // 将样式应用到相册容器层上
                         dom.className.add(container,"styleContainer");
                                                 // 将图片添加到相册容器上
                                                 container.appendChild(curImg);
                                                
                                                 // 创建信息栏
                                                 var infobar = document.createElement("div");
                                                     infobar.setAttribute("id","infobar");
                                                         infobar.style.display = "block";
                                                 // 将样式应用到信息栏上
                         dom.className.add(infobar,"styleInfoBar");
                                                
                                                 // 创建图片信息条
                                                 var imginfo = document.createElement("p");
                                                     imginfo.setAttribute("id","imginfo");
                                                 dom.className.add(imginfo,"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上
                         dom.className.add(albumsLogo,"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","关闭窗口");
                                                 dom.className.add(closebar,"styleCloseBar");
                                                 // 将关闭按钮添加到信息栏中
                                                 infobar.appendChild(closebar);
                                                
                                                 // 将信息栏添加到相册容器上
                                                 container.appendChild(infobar);
                                                
                                                 // 创建底部导航信息栏
                         var navbar = document.createElement("div");
                             navbar.setAttribute("id","navbar");
                                                 // 将导航栏样式应用到该层        
                         dom.className.add(navbar,"styleNavBar");
                                                
                                                 // 创建图片索引信息导航条
                                                 var txtIndex = document.createElement("p");
                             txtIndex.setAttribute("id","txtindex");
                                                 // 将样式应用到信息条上        
                         dom.className.add(txtIndex,"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");
                                                 // 将样式应用到上一页导航上
                         dom.className.add(prePage,"stylePrePage");
                                                 // 创建上一页导航文本
                         var txtPrePage = document.createTextNode(o.sTxtPrePage);
                         prePage.appendChild(txtPrePage);
                                                 // 将文本追加到导航上        
                         navbar.appendChild(prePage);
                                                
                                                
                                                
                                                 // 创建下一页导航
                                                 var nextPage = document.createElement("p");
                             nextPage.setAttribute("id","nextPage");
                                                 // 将样式应用到该层上
                         dom.className.add(nextPage,"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;
                                                 o.fixPos();
                                                 // 根据索引控制翻页导航是否可用
                                                 if (o.sIndex == o.sImgCount) {
                                                         dom.setStyle(nextPage, o.stylePageDisable);      // 最后一张时，下一页按钮不可用
                                                 }
                                                 else {
                                                         if (o.sIndex == 1)
                                                                 dom.setStyle(prePage, o.stylePageDisable);   // 第一张时，上一页按钮不可用
                                                 }
                                                
                                                 // 给相册层添加逐渐显示的动画效果
                                                 dom.slideUp(container);
                                                
                                                 closebar.onclick = o.close;
                                                 nextPage.onclick = o.next;
                                                  prePage.onclick = o.previous;
                                                   curImg.onclick = o.show;
                                         })();
                                        
                                         return false;  // 消除A标签默认动作
                                }
                                this.pathIndex++;
                        }
                }
        },
       
        // 关闭相册
        close: function(){
                var pos = 100;
                var o = myLib.Albums;
                var dom = myLib.Dom;
                                      
            var tt = window.setInterval(function(){
                if (pos <= 5) {
                                if (tt) {
                                        document.body.removeChild(o.oImgContainer);
                                        document.body.removeChild(o.oShardow);
                                        window.clearInterval(tt);
                                }
                        }
                        else {
                                pos -= 5;
                                dom.setOpacity(o.oImgContainer, pos);
                        }                
            },50);
        },
       
        // 显示下一张图片
        next: function(){
                var o = myLib.Albums;
                var dom = myLib.Dom;
                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.fixPos();
                         // 给重新调整后的相册层添加逐渐显示的动画效果
             dom.slideUp(o.oImgContainer);
                        
                         o.sIndex++;  // 移到下一张的索引
                        
                         // 上一页按钮可用
                         dom.setStyle(o.oPrePage, o.stylePageEnable);
                         // 当图片转到最后一张时，下一页按钮不可用
                         // 不要奇怪因为前面o.sIndex++，所以原本o.sIndex==11(o.sIndex != o.sImgCount)成立
                         // 而++后，现在o.sIndex==o.sImgCount(12)，也就是到了最后一张图片了
                         if(o.sIndex == o.sImgCount) dom.setStyle(o.oNextPage,o.stylePageDisable);
        }
        },
       
        // 显示上一张图片
        previous: function(){
                var o = myLib.Albums;
                var dom = myLib.Dom;
                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.fixPos();
                         // 给重新调整后的相册层添加逐渐显示的动画效果
             dom.slideUp(o.oImgContainer);
                        
                         o.sIndex--;  // 移到上一张的索引
                        
                         // 下一页按钮可用
                         dom.setStyle(o.oNextPage, o.stylePageEnable);
                         // 如果转到第一张图片，上一页按钮不可用
                         if (o.sIndex == 1) dom.setStyle(o.oPrePage, o.stylePageDisable);
        }
        },
       
        show: function(){
                 var o = myLib.Albums;
                 var dom = myLib.Dom;
                 var maxHeight = -40;
                 var minHeight = 0;
                 var pos = 100;
             if(o.oInfoBar.style.display == "block"){
                        var tt = window.setInterval(function(){
                                     
                               if(minHeight < maxHeight){
                                                if(tt){
                                             o.oInfoBar.style.marginTop = maxHeight + "px";
                                             dom.setOpacity(o.oInfoBar,0);
                                             pos = 0;
                                             o.oInfoBar.style.display = "none";
                                                          window.clearInterval(tt);
                                                }       
                                      }
                               minHeight -= 4;
                               pos -= 10;
                               o.oInfoBar.style.marginTop = minHeight + "px";
                               dom.setOpacity(o.oInfoBar,pos);
                        },60);
             }       
             else{
                 var ss = window.setInterval(function(){
                               o.oInfoBar.style.display = "block";
                               if(maxHeight > -5){
                                                if(ss){
                                             o.oInfoBar.style.marginTop = 0; 
                                             dom.setOpacity(o.oInfoBar,100);
                                                          window.clearInterval(ss);
                                                }       
                                      }
                               maxHeight += 4;
                               minHeight += 10;
                               dom.setOpacity(o.oInfoBar,minHeight);
                               o.oInfoBar.style.marginTop = maxHeight + "px";
                        },60);
             }  
        },
       
        // 重新刷新相册容器
        fixPos: function(){
         var o = myLib.Albums;
                 var com = myLib.Com;
                
                 var oShardow = o.oShardow;
                 var oCurImg = o.oCurrentImg;
                 var oContainer = o.oImgContainer;
                 var oInfoBar = o.oInfoBar;
                 var oNavBar = o.oNavBar;
                
         if (oCurImg && oContainer && oShardow){
                     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";
                               
                         var yScroll = com.Page.getScroll()[1];
                         var xScroll = com.Page.getScroll()[0];
                         var winHeight = com.Page.getCurWinSize()[1];
                         var winWidth = com.Page.getCurWinSize()[0];
                         var DocHeight = com.Page.getPageSize()[1];
                         var DocWidth = com.Page.getPageSize()[0];
                        
                         var w = "100%";
                         // 调整阴影层宽度                        
                         if(tempWidth > winWidth){
                                  w = (tempWidth + 20) + "px";
                         }
                        
                         oShardow.style.width = w;
                         oShardow.style.height = com.Page.getPageSize()[1] + "px";
                        
                         var marginTop = tempHeight > winHeight ? yScroll : yScroll + (winHeight - (tempHeight + 20)) / 2;
                         // 控制相册层不能无限制的向下滑动,当相册的底边超过文档或视口大小时,停止滚动.
                         if(tempHeight > winHeight && (marginTop + tempHeight) > DocHeight) return;
                                
                         oContainer.style.top = marginTop + 'px'
                         oContainer.style.marginLeft = '-' + (tempWidth / 2 + 10) + 'px';
                               
                         oInfoBar.style.width = (tempWidth + 10) + "px";
                         oNavBar.style.width = (tempWidth + 10) + "px";
                 }
     }
}

myLib.Event.addEvent(window,"resize",myLib.Albums.fixPos);
myLib.Event.addEvent(window,"scroll",myLib.Albums.fixPos);