Javascript制作简单的相册效果_Javascript教程_H5之家

一个单体类：
详细代码：
YAO.YLightBox = {
isHidden: false,
photos: null,
length: 0,
YOverlay: null,
YBox: null,
YBoxDefaultWidth: 500,
YBoxDefaultHeight: 0,
YBoxHd: null,
YBoxHdHeight: 0,
YBoxTitle: null,
YBoxToolBar: null,
closeable: true,  // 是否有关闭按钮（这个我忘了加ESC的按钮事件的支持，会加上的。）
YBoxCloseBar: null,
maximizable: true, // 伸缩显示图片按钮是否可用
YBoxMaximizeBar: null,
newindowable: true, // 新窗口打开图片按钮是否可用
YBoxNewWinBar: null,
YBoxBd: null,
YBoxBDefaultHeight: 0,
YBoxPhoto: null,
YBoxPhotoDefaultWidth: 0,
YBoxPhotoDefaultHeight: 0,
YBoxTips: null,
YBoxIndex: null,
YBoxLastIndex: 0,
carouselable: true, // 是否有缩略图索引（Carousel插件）
YCarousel: null,
YBoxCarousel: null,
YBoxScroller: null,
YBoxBtnLastGroup: null,
YBoxBtnNextGroup: null,
YBoxLastSample: null,
albumabel: true, // 是否可以之间点图片左右切换（Album的一个功能）
YAlbum: null,
YBoxBtnPrevious: null,
YBoxBtnNext: null,
BTN_DISABLED_CLASS: 'dis',
IMG_BTN_PREVIOUS: 'url(img/last-photo.gif)',
IMG_BTN_NEXT: 'url(img/next-photo.gif)',

init: function(itemClass, itemTag, rootId){
      var i, oSelf = this;
      this.photos = YAO.getElByClassName(itemClass, itemTag, rootId);
      this.length = this.photos.length;
      for (i = 0; i < this.length; ++i) {
         YAO.on(this.photos[i], 'click', function(index){
            return function(event){
                  var evt = event || window.event;
                  this.YBoxLastIndex = index;
                  this.YBoxPhotoDefaultWidth = this.photos[this.YBoxLastIndex].width;
                  this.YBoxPhotoDefaultHeight = this.photos[this.YBoxLastIndex].height;
                  this.initComponent();
                  this.zoom();
                  YAO.stopEvent(evt);
            }
         }(i), this.photos[i], oSelf);
      }
},
initComponent: function(){
      if (!this.YBox) {
         this.create();
         this.initEvents();
      }
      else {
         this.show();
      }
      this.currentSample();
},
create: function(){
      var D = document, i, oDfBox = D.createDocumentFragment(), oDfTip = D.createDocumentFragment(), docWidth = YAO.getDocumentWidth(), docHeight = YAO.getDocumentHeight(), oSelf = this;
      oImage = this.photos[this.YBoxLastIndex];
      oDfBox.appendChild(YAO.Builder.Node('div', {
         id: 'yl-shardow'
      }));
      oDfBox.appendChild(YAO.Builder.Node('div', {
         id: 'yl-box'
      }, [YAO.Builder.Node('div', {
         id: 'yl-box-hd'
      }, [YAO.Builder.Node('h3', {
         id: 'yl-box-tlt'
      }, oImage.alt),YAO.Builder.Node('span',{
         id: 'yl-box-toolbar'
      })]), YAO.Builder.Node('div', {
         id: 'yl-box-bd'
      }, [YAO.Builder.Node('img', {
         src: oImage.src,
         alt: oImage.alt,
         id: 'yl-photo'
      }), YAO.Builder.Node('div', {
         id: 'carousel'
      },YAO.Builder.Node('div', {
            id: 'carousel_container'
      }))])]));
      D.body.appendChild(oDfBox);

      this.YOverlay = YAO.getEl('yl-shardow');
      YAO.setStyles(this.YOverlay, {
         height: docHeight + 'px'
      });

      this.YBox = YAO.getEl('yl-box');
      this.YBoxHd = YAO.getEl('yl-box-hd');
      this.YBoxHdHeight = this.YBoxHd.offsetHeight;
      this.YBoxTitle = YAO.getEl('yl-box-tlt');
      this.YBoxToolBar = YAO.getEl('yl-box-toolbar');

      this.initTools();

      this.YBoxBd = YAO.getEl('yl-box-bd');
      this.YBoxCarousel = YAO.getEl('carousel');
      this.YBoxCarouselCnt = YAO.getEl('carousel_container');
      this.YBoxPhoto = YAO.getEl('yl-photo');

      this.initPlgins();

      oDfTip.appendChild(YAO.Builder.Node('div', {
         id: 'yl-tips'
      }, [YAO.Builder.Node('em', {
         id: 'yl-curIndex'
      }, (this.YBoxLastIndex + 1) + ''), ' / ' + this.length + ' pictures']));
      this.YBoxCarousel.appendChild(oDfTip);

      this.YBoxTips = YAO.getEl('yl-tips');
      this.YBoxIndex = YAO.getEl('yl-curIndex');

      if (this.carouselable) {
         this.YBoxLastSample = this.YCarousel.items[this.YBoxLastIndex];
      }

      this.isHidden = false;
},
initTools: function(){
      var D = document, oDfTools = D.createDocumentFragment();
      oImage = this.photos[this.YBoxLastIndex];
      if (this.newindowable) {
         oDfTools.appendChild(YAO.Builder.Node('a', {
            id: 'yl-box-newindow',
            href: oImage.src,
            target: '_blank',
            title: '新窗口打开'
         }, '新窗口打开'));
      }
      if (this.maximizable) {
         oDfTools.appendChild(YAO.Builder.Node('a', {
            id: 'yl-box-adjust',
            className: 'imgadjust',
            href: '#adjust',
            title: '显示实际尺寸'
         }, '显示实际尺寸'));
      }
      if (this.closeable) {
         oDfTools.appendChild(YAO.Builder.Node('a', {
            id: 'yl-box-closebar',
            className: 'imgclose',
            href: '#close',
            title: '关闭窗口'
         }, '关闭窗口'));
      }
      this.YBoxToolBar.appendChild(oDfTools);
      this.YBoxNewWinBar = YAO.getEl('yl-box-newindow');
      this.YBoxMaximizeBar = YAO.getEl('yl-box-adjust');
      this.YBoxCloseBar = YAO.getEl('yl-box-closebar');
},
initPlgins: function(){
      var D = document, oSelf = this, oCConfig = {}, oAConfig = {}, i, oDfSamples = D.createDocumentFragment(), oDfBtnsGroups = D.createDocumentFragment(), oDfBtnsPhoto = D.createDocumentFragment();
      if (this.carouselable) {
         this.YBoxCarouselCnt.appendChild(YAO.Builder.Node('ul', {
            id: 'samples_list'
         }));
         this.YBoxScroller = YAO.getEl('samples_list');

         for (i = 0; i < this.length; ++i) {
            oDfSamples.appendChild(YAO.Builder.Node('li', {
                  className: i === oSelf.YLastIndex ? 'current' : ''
            }, YAO.Builder.Node('a', {
                  href: oSelf.photos[i].src,
                  title: oSelf.photos[i].alt,
                  target: 'blank'
            }, YAO.Builder.Node('img', {
                  src: oSelf.photos[i].src,
                  alt: oSelf.photos[i].alt
            }))));
         }
         this.YBoxScroller.appendChild(oDfSamples);

         oDfBtnsGroups.appendChild(YAO.Builder.Node('div', {
            id: 'carousel_btn_lastgroup'
         }, YAO.Builder.Node('a', {
            href: '#lastgroup',
            title: '上一组'
         }, '上一组')));
         oDfBtnsGroups.appendChild(YAO.Builder.Node('div', {
            id: 'carousel_btn_nextgroup'
         }, YAO.Builder.Node('a', {
            href: '#nextgroup',
            title: '下一组'
         }, '下一组')));
         this.YBoxCarousel.appendChild(oDfBtnsGroups);

         this.YBoxBtnLastGroup = YAO.getEl('carousel_btn_lastgroup');
         this.YBoxBtnNextGroup = YAO.getEl('carousel_btn_nextgroup');

         oCConfig = {
            btnPrevious: oSelf.YBoxBtnLastGroup,
            Container: oSelf.YBoxCarouselCnt,
            Scroller: oSelf.YBoxScroller,
            btnNext: oSelf.YBoxBtnNextGroup,
            stepWidth: 100,
            items: 'li'
         };
         this.YCarousel = new YAO.Carousel(oCConfig);
      }

      if (this.albumabel) {
         oDfBtnsPhoto.appendChild(YAO.Builder.Node('a', {
            id: 'carousel_previous_photo',
            className: 'previous',
            href: (oSelf.YLastIndex - 1 > 0) ? oSelf.photos[oSelf.YLastIndex - 1].src : oSelf.photos[0].src,
            title: '上一张',
            target: '_blank'
         }, '上一张'));
         oDfBtnsPhoto.appendChild(YAO.Builder.Node('a', {
            id: 'carousel_next_photo',
            className: 'next',
            href: (oSelf.YLastIndex + 1 < oSelf.length - 1) ? oSelf.photos[oSelf.YLastIndex + 1].src : oSelf.photos[oSelf.length - 1].src,
            title: '下一张',
            target: '_blank'
         }, '下一张'));
         this.YBoxBd.appendChild(oDfBtnsPhoto);

         this.YBoxBtnPrevious = YAO.getEl('carousel_previous_photo');
         this.YBoxBtnNext = YAO.getEl('carousel_next_photo');
      }
},
show: function(){
      var oImage = this.photos[this.YBoxLastIndex];
      if (this.YOverlay && this.YBox && this.isHidden) {
         this.YBoxTitle.innerHTML = oImage.alt;
         this.YBoxNewWinBar.href = oImage.src;
         YAO.Builder.Attributes(this.YBoxPhoto, {
            src: oImage.src,
            alt: oImage.alt
         });
         this.YBoxIndex.innerHTML = (this.YBoxLastIndex + 1);
         YAO.setStyle(this.YOverlay, 'display', 'block');
         YAO.setStyle(this.YBox, 'display', 'block');
         this.isHidden = false;
      }
},
initBtns: function(){
      var oSelf = this;
      if (this.albumabel) {
         if (YAO.ua.ie) {
            YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', oSelf.IMG_BTN_PREVIOUS);
            YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', oSelf.IMG_BTN_NEXT);
         }
         if (this.YBoxLastIndex === 0) {
            YAO.addClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
            if (YAO.ua.ie) {
                  YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', 'none');
            }
         }
         if (this.YBoxLastIndex === (this.length - 1)) {
            YAO.addClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
            if (YAO.ua.ie) {
                  YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', 'none');
            }
         }
      }
},
initEvents: function(){
      var i;

      if (this.maximizable) {
         YAO.on(this.YBoxHd, 'dblclick', this.toggleMaximize, this.YBoxHd, this); // 当可伸缩时，双击标题栏，可以伸缩窗口，现在更想window的窗口了！
         YAO.on(this.YBoxMaximizeBar, 'click', this.toggleMaximize, this.YBoxMaximizeBar, this);
      }
      if (this.closeable) {
         YAO.on(this.YBoxCloseBar, 'click', this.close, this.YBoxCloseBar, this);
      }

      if (this.carouselable) {
         for (i = 0; i < this.length; ++i) {
            YAO.on(this.YCarousel.items[i], 'click', function(index){
                  return function(event){
                     var evt = event || window.event;
                     this.YBoxLastIndex = index;
                     this.btnsEnabled();
                     this.changePhoto();
                     YAO.stopEvent(evt);
                  }
            }(i), this.YCarousel.items[i], this);
         }

         YAO.on(this.YBoxTips, 'click', this.showCarousel, this.YBoxTips, this);
      }

      if(this.albumabel){
         YAO.on(this.YBoxBtnPrevious, 'click', this.previousPhoto, this.YBoxBtnPrevious, this);
         YAO.on(this.YBoxBtnNext, 'click', this.nextPhoto, this.YBoxBtnNext, this);
      }

      YAO.on(window, 'scroll', this.fixPosition, window, this);
      YAO.on(window, 'resize', this.fixPosition, window, this);
},
close: function(event){
      var evt = event || window.event;
      if (this.YOverlay && this.YBox && !this.isHidden) {
         YAO.setStyle(this.YOverlay, 'display', 'none');
         YAO.setStyle(this.YBox, 'display', 'none');
         this.minimize();
         this.isHidden = true;
         this.YBoxLastIndex = 0;
      }
      YAO.stopEvent(evt);
},
zoom: function(){
      var percent = this.YBoxPhotoDefaultWidth / this.YBoxPhotoDefaultHeight, height = this.YBoxDefaultWidth / percent;
      this.YBoxDefaultHeight = height + this.YBoxHdHeight;
      this.YBoxBDefaultHeight = height;
      if (this.YBoxPhotoDefaultWidth > this.YBoxDefaultWidth) {
         this.minimize();
      }
      else {
         this.restore();
      }
      this.scrollCarousel();
      this.initBtns();
      this.fixPosition();
},
minimize: function(){
      var oSelf = this;
      YAO.setStyles(this.YBoxPhoto, {
         width: oSelf.YBoxDefaultWidth + 'px',
         height: oSelf.YBoxDefaultHeight + 'px'
      });
      YAO.setStyles(this.YBoxBd, {
         width: oSelf.YBoxDefaultWidth + 'px',
         height: oSelf.YBoxBDefaultHeight + 'px'
      });
      YAO.setStyles(this.YBox, {
         width: oSelf.YBoxDefaultWidth + 'px',
         height: oSelf.YBoxDefaultHeight + 'px'
      });
      if (this.YBoxMaximizeBar) {
         this.YBoxMaximizeBar.title = '显示实际尺寸';
      }
      if (YAO.ua.ie && this.albumable) {
         YAO.setStyle(this.YBoxBtnPrevious, 'height', (this.YBoxDefaultHeight + 'px'));
         YAO.setStyle(this.YBoxBtnNext, 'height', (this.YBoxDefaultHeight + 'px'));
      }
},
restore: function(){
      var oSelf = this;
      YAO.setStyles(this.YBoxPhoto, {
         width: oSelf.YBoxPhotoDefaultWidth + 'px',
         height: oSelf.YBoxPhotoDefaultHeight + 'px'
      });
      YAO.setStyles(this.YBoxBd, {
         width: oSelf.YBoxPhotoDefaultWidth + 'px',
         height: oSelf.YBoxPhotoDefaultHeight + 'px'
      });
      YAO.setStyles(this.YBox, {
         width: oSelf.YBoxPhotoDefaultWidth + 'px',
         height: (oSelf.YBoxPhotoDefaultHeight + oSelf.YBoxHdHeight) + 'px'
      });
      if (this.YBoxMaximizeBar) {
         this.YBoxMaximizeBar.title = '显示缩略图';
      }
      if (YAO.ua.ie && this.albumable) {
         YAO.setStyle(this.YBoxBtnPrevious, 'height', (this.YBoxPhotoDefaultWidth + 'px'));
         YAO.setStyle(this.YBoxBtnNext, 'height', (this.YBoxPhotoDefaultHeight + 'px'));
      }
},
toggleMaximize: function(event){
      var evt = event || window.event;
      if (this.YBoxPhotoDefaultWidth > this.YBoxDefaultWidth) {
         if (this.YBoxPhoto.width === this.YBoxDefaultWidth) {
            this.restore();
         }
         else {
            this.minimize();
         }
         this.fixPosition();
      }
      YAO.stopEvent(evt);
},
fixPosition: function(){
      var documentWidth = YAO.getDocumentWidth(), documentHeight = YAO.getDocumentHeight(), viewportWidth = YAO.getViewportWidth(), viewportHeight = YAO.getViewportHeight(), xScroll = YAO.getXScroll(), yScroll = YAO.getYScroll(), YBoxWidth = this.YBox.offsetWidth, YBoxHeight = this.YBox.offsetHeight, left = xScroll + ((viewportWidth - YBoxWidth) / 2), top = yScroll + ((viewportHeight - YBoxHeight) / 2);

      if (YBoxWidth > viewportWidth) {
         if ((YBoxWidth < documentWidth) && ((YBoxWidth + xScroll) < documentWidth)) {
            left = xScroll;
         }
         else {
            left = documentWidth - YBoxWidth;
         }
      }
      else {
         if (YBoxWidth > documentWidth) {
            left = 0;
         }
      }
      if (YBoxHeight > viewportHeight) {
         if ((YBoxHeight < documentHeight) && ((YBoxHeight + yScroll) <= documentHeight)) {
            top = yScroll;
         }
         else {
            top = documentHeight - YBoxHeight;
         }
      }
      else {
         if (YBoxHeight > documentHeight) {
            top = 0;
         }
      }

      if (!this.isHidden) {
         YAO.setStyles(this.YBox, {
            margin: 0,
            left: left + 'px',
            top: top + 'px'
         });
      }
},
showCarousel: function(){
      var top = parseInt(YAO.getStyle(this.YBoxCarousel, 'top'), 10);
      if (top === -120) {
         YAO.moveElement(this.YBoxCarousel, 0, 0, 50);
         YAO.setStyle(this.YBoxBtnLastGroup, 'display', 'block');
         YAO.setStyle(this.YBoxBtnNextGroup, 'display', 'block');
      }
      else {
         YAO.moveElement(this.YBoxCarousel, 0, -120, 50);
         YAO.setStyle(this.YBoxBtnLastGroup, 'display', 'none');
         YAO.setStyle(this.YBoxBtnNextGroup, 'display', 'none');
      }
},
currentSample: function(){
      var curSample = null;
      if (this.carouselable) {
         curSample = this.YCarousel.items[this.YBoxLastIndex];

         if (curSample !== this.YBoxLastSample) {
            YAO.removeClass(this.YBoxLastSample, 'current');
         }
         YAO.addClass(curSample, 'current');
         this.YBoxLastSample = curSample;
      }
},
scrollCarousel: function(){
      if (this.carouselable) {
         var curScreen = Math.ceil(((this.YBoxLastIndex + 1) * this.YCarousel.itemWidth) / this.YCarousel.stepWidth) - 1;
         if (curScreen != this.YCarousel.movedNum) {
            this.YCarousel.scroll(curScreen);
            this.YCarousel.movedNum = curScreen;
            if (this.YCarousel.movedNum !== 0 && YAO.hasClass(this.YCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS)) {
                  YAO.removeClass(this.YCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS);
            }
            else {
                  if (this.YCarousel.movedNum === 0) {
                     YAO.addClass(this.YCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS);
                  }
            }
            if (this.YCarousel.movedNum !== this.YCarousel.maxMovedNum && YAO.hasClass(this.YCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS)) {
                  YAO.removeClass(this.YCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS);
            }
            else {
                  if (this.YCarousel.movedNum === this.YCarousel.maxMovedNum) {
                     YAO.addClass(this.YCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS);
                  }
            }
         }
      }
},
btnsEnabled: function(){
      if (this.albumabel) {
         if (this.YBoxLastIndex !== 0) {
            if (YAO.hasClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS)) {
                  YAO.removeClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
            }
            if (YAO.ua.ie) {
                  YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', this.IMG_BTN_PREVIOUS);
            }
            this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex - 1].src;
         }
         else {
            if (this.YBoxLastIndex === 0) {
                  YAO.addClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
                  if (YAO.ua.ie) {
                     YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', 'none');
                  }
                  this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex].src;
            }
         }
         if (this.YBoxLastIndex !== (this.length - 1)) {
            if (YAO.hasClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS)) {
                  YAO.removeClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
            }
            if (YAO.ua.ie) {
                  YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', this.IMG_BTN_NEXT);
            }
            this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex + 1].src;
         }
         else {
            if (this.YBoxLastIndex === (this.length - 1)) {
                  YAO.addClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
                  if (YAO.ua.ie) {
                     YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', 'none');
                  }
                  this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex].src;
            }
         }
      }
},
previousPhoto: function(event){
      var evt = event || window.event;
      this.YBoxLastIndex -= 1;

      if (YAO.hasClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS)) {
         YAO.removeClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
      }
      if (this.YBoxLastIndex >= 1) {
         this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex - 1].src;
      }

      if (this.YBoxLastIndex < 0) {
         this.YBoxLastIndex = 0;
         YAO.addClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
         this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex].src;
      }
      this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex + 1].src;

      this.changePhoto();
      YAO.stopEvent(evt);
},
nextPhoto: function(event){
      var evt = event || window.event;
      this.YBoxLastIndex += 1;

      if (YAO.hasClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS)) {
         YAO.removeClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
      }
      if (this.YBoxLastIndex <= (this.length - 2)) {
         this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex + 1].src;
      }

      if (this.YBoxLastIndex > (this.length - 1)) {
         this.YBoxLastIndex = this.length - 1;
         YAO.addClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
         this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex].src;
      }
      this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex-1].src;

      this.changePhoto();
      YAO.stopEvent(evt);
},
changePhoto: function(){
      this.YBoxPhotoDefaultWidth = this.photos[this.YBoxLastIndex].width;
      this.YBoxPhotoDefaultHeight = this.photos[this.YBoxLastIndex].height;
      this.YBoxTitle.innerHTML = this.photos[this.YBoxLastIndex].alt;
      this.YBoxIndex.innerHTML = (this.YBoxLastIndex + 1);
      this.YBoxPhoto.src = this.photos[this.YBoxLastIndex].src;
      this.YBoxPhoto.alt = this.photos[this.YBoxLastIndex].alt;
      if (this.YBoxNewWinBar) {
         this.YBoxNewWinBar.href = this.photos[this.YBoxLastIndex].src;
      }
      this.currentSample();
      this.scrollCarousel();
      this.zoom();
}
};
现在的版本是把我的carousel+yalbum+lightbox整合到一起了，效果也还可以。这个效果比较合适论坛题图的板块，因为目前的设置，只是针对图片点击显示lightbox。需要图片加载完成了才可以启动效果。