JS实现carousel相册效果源码

_r2_c2.gif (88.05 KB)

2009-7-28 11:34

YAO.YAlbum = function(oConfig){
    var oSelf = this;
    this.oCarousel = new YAO.Carousel({ // 初始配置处理了下，可以直接用我设计好的插件名称，也可以自己配置，主要是写了YLIGHTBOX后，发现扩展性的问题。
        btnPrevious: (oConfig && oConfig.btnPrevious) ? oConfig.btnPrevious : oSelf.CARSOUEL_BTN_PREVIOUS,
        Container: (oConfig && oConfig.Container) ? oConfig.Container : oSelf.CARSOUEL_CONTAINER,
        Scroller: (oConfig && oConfig.Scroller) ? oConfig.Scroller : oSelf.CARSOUEL_SCROLLER,
        btnNext: (oConfig && oConfig.btnNext) ? oConfig.btnNext : oSelf.CARSOUEL_BTN_NEXT,
        items: (oConfig && oConfig.items) ? oConfig.items : oSelf.CARSOUEL_ITEM_TAG,
        stepWidth: (oConfig && oConfig.stepWidth) ? oConfig.stepWidth : oSelf.CARSOUEL_STEP_WIDTH
    });
    this.oSamples = this.oCarousel.Scroller.getElementsByTagName('a') || null;
    this.length = this.oSamples.length || 0;
    this.lastSample = this.oSamples[0] || null;
    this.photoContainer = (oConfig && oConfig.photoContainer) ? (YAO.isString(oConfig.photoContainer) ? YAO.getEl(oConfig.photoContainer) : oConfig.photoContainer) : (YAO.getEl(this.PHOTO_CONTAINER_ID) || null);
    this.photo = (oConfig && oConfig.photo) ? (YAO.isString(oConfig.photo) ? YAO.getEl(oConfig.photo) : oConfig.photo) : (YAO.getEl(this.PHOTO_ID) || null);
    this.photoIntro = (oConfig && oConfig.photoIntro) ? (YAO.isString(oConfig.photoIntro) ? YAO.getEl(oConfig.photoIntro) : oConfig.photoIntro) : (YAO.getEl(this.PHOTO_INTRO_ID) || null);
    this.PHOTO_MAX_WIDTH = (oConfig && oConfig.photoMaxWidth) ? oConfig.photoMaxWidth : this.PHOTO_MAX_WIDTH;
    this.sIntro = this.photo.alt || '';
    
    this.init();
};
YAO.YAlbum.prototype.lastIndex = 0;
YAO.YAlbum.prototype.isLoading = false;
YAO.YAlbum.prototype.lastPhotoHeight = 0;
YAO.YAlbum.prototype.loadShardow = null;
YAO.YAlbum.prototype.loadImg = null;
YAO.YAlbum.prototype.btnPrevious = null;
YAO.YAlbum.prototype.btnNext = null;
YAO.YAlbum.prototype.CARSOUEL_BTN_PREVIOUS = YAO.getEl('carousel_btn_lastgroup');
YAO.YAlbum.prototype.CARSOUEL_CONTAINER = YAO.getEl('carousel_container');
YAO.YAlbum.prototype.CARSOUEL_SCROLLER = YAO.getEl('samples_list');
YAO.YAlbum.prototype.CARSOUEL_BTN_NEXT = YAO.getEl('carousel_btn_nextgroup');
YAO.YAlbum.prototype.CARSOUEL_ITEM_TAG = 'li';
YAO.YAlbum.prototype.CARSOUEL_STEP_WIDTH = 672;
YAO.YAlbum.prototype.PHOTO_MAX_WIDTH = 800;
YAO.YAlbum.prototype.PHOTO_CONTAINER_ID = 'carousel_photo_container';
YAO.YAlbum.prototype.PHOTO_ID = 'carousel_photo';
YAO.YAlbum.prototype.PHOTO_INTRO_ID = 'carousel_photo_intro';
YAO.YAlbum.prototype.BTN_NEXT_ID = 'carousel_next_photo';
YAO.YAlbum.prototype.BTN_NEXT_CLASS = 'next';
YAO.YAlbum.prototype.BTN_PREVIOUS_ID = 'carousel_previous_photo';
YAO.YAlbum.prototype.BTN_PREVIOUS_CLASS = 'previous';
YAO.YAlbum.prototype.BTN_DISABLED_CLASS = 'dis';
YAO.YAlbum.prototype.IMG_BTN_PREVIOUS = 'url(img/last-photo.gif)';
YAO.YAlbum.prototype.IMG_BTN_NEXT = 'url(img/next-photo.gif)';
YAO.YAlbum.prototype.SHARDOW_ID = 'carousel_photo_shardow';
YAO.YAlbum.prototype.LOAD_IMG_PATH = 'img/loading.gif';
YAO.YAlbum.prototype.LOAD_IMG_ID = 'carousel_photo_loading';
YAO.YAlbum.prototype.init = function(){
    var oSelf = this, i;
    
    YAO.addClass(this.lastSample, 'current');
    this.btnPrevious = YAO.Builder.Node('a', {
        href: oSelf.oSamples[oSelf.lastIndex].href,
        id: oSelf.BTN_PREVIOUS_ID,
        className: oSelf.BTN_PREVIOUS_CLASS,
        title: '上一张'
    }, '上一张');
    this.photoContainer.appendChild(this.btnPrevious);
    this.btnNext = YAO.Builder.Node('a', {
        href: oSelf.oSamples[oSelf.lastIndex + 1].href,
        id: oSelf.BTN_NEXT_ID,
        className: oSelf.BTN_NEXT_CLASS,
        title: '下一张'
    }, '下一张');
    this.photoContainer.appendChild(this.btnNext);
    this.load(this.photo.src);
    
    YAO.on(this.btnPrevious, 'click', function(event){
        var evt = event || window.event;
        this.Previous();
        YAO.stopEvent(evt);
    }, this.btnPrevious, oSelf);
    YAO.on(this.btnNext, 'click', function(event){
        var evt = event || window.event;
        this.Next();
        YAO.stopEvent(evt);
    }, this.btnNext, oSelf);
    
    for (i = 0; i < this.length; ++i) {
        YAO.on(this.oSamples[i], 'click', function(index){
            return function(event){
                var evt = event || window.event, curSample = this.oSamples[index];
                if (this.lastSample !== curSample && !this.isLoading) {
                    this.lastIndex = index;
                    this.btnsEnabled();
                    this.chgPhoto();
                }
                YAO.stopEvent(evt);
            }
        }(i), this.oSamples[i], oSelf);
    }
};
YAO.YAlbum.prototype.btnsEnabled = function(){
    if (this.lastIndex !== 0 && YAO.hasClass(this.btnPrevious, this.BTN_DISABLED_CLASS)) {
        YAO.removeClass(this.btnPrevious, this.BTN_DISABLED_CLASS);
        if (YAO.ua.ie) {
            this.btnPrevious.style.backgroundImage = this.IMG_BTN_PREVIOUS;
        }
        this.btnPrevious.href = this.oSamples[this.lastIndex - 1];
    }
    else {
        if (this.lastIndex === 0) {
            YAO.addClass(this.btnPrevious, this.BTN_DISABLED_CLASS);
            if (YAO.ua.ie) {
                this.btnPrevious.style.backgroundImage = 'none';
            }
            this.btnPrevious.href = this.oSamples[this.lastIndex];
        }
    }
    if (this.lastIndex !== (this.length - 1) && YAO.hasClass(this.btnNext, this.BTN_DISABLED_CLASS)) {
        YAO.removeClass(this.btnNext, this.BTN_DISABLED_CLASS);
        if (YAO.ua.ie) {
            this.btnNext.style.backgroundImage = this.IMG_BTN_NEXT;
        }
        this.btnNext.href = this.oSamples[this.lastIndex + 1];
    }
    else {
        if (this.lastIndex === (this.length - 1)) {
            YAO.addClass(this.btnNext, this.BTN_DISABLED_CLASS);
            if (YAO.ua.ie) {
                this.btnNext.style.backgroundImage = 'none';
            }
            this.btnNext.href = this.oSamples[this.lastIndex];
        }
    }
};                    
YAO.YAlbum.prototype.load = function(path){
    var oImage = new Image(), oDf = document.createDocumentFragment();
    oImage.src = path;
    
    if (oImage.complete) {
        this.resize(oImage);
    }
    else {
        this.isLoading = true;
        this.loadShardow = YAO.Builder.Node('div', {
            id: this.SHARDOW_ID
        });
        this.loadImg = YAO.Builder.Node('img', {
            src: this.LOAD_IMG_PATH,
            id: this.LOAD_IMG_ID
        });
        oDf.appendChild(this.loadShardow);
        if (YAO.ua.ie) {
            this.loadShardow.style.height = this.lastPhotoHeight ? this.lastPhotoHeight + 'px' : this.photoContainer.offsetHeight + 'px';
        }
        oDf.appendChild(this.loadImg);
        this.photoContainer.appendChild(oDf);
        YAO.on(oImage, 'load', function(){
            this.resize(oImage);
        }, oImage, this);
    }
};
YAO.YAlbum.prototype.resize = function(oImage){
    var oSelf = this;
    var width = oImage.width;
    var height = oImage.height;
    var percent = width / height;
    if (width > this.PHOTO_MAX_WIDTH) {
        width = this.PHOTO_MAX_WIDTH;
        height = width / percent;
    }
    if (YAO.ua.ie) {
        this.lastPhotoHeight = height;
        YAO.setStyles(this.btnPrevious, {
            height: height + 'px',
            backgroundImage: oSelf.IMG_BTN_PREVIOUS
        });
        YAO.setStyles(this.btnNext, {
            height: height + 'px',
            backgroundImage: oSelf.IMG_BTN_NEXT
        });
    }
    if (this.lastIndex === 0) {
        YAO.addClass(this.btnPrevious, this.BTN_DISABLED_CLASS);
        if (YAO.ua.ie) {
            this.btnPrevious.style.backgroundImage = 'none';
        }
    }
    if (this.lastIndex === (this.length - 1)) {
        YAO.addClass(this.btnNext, this.BTN_DISABLED_CLASS);
        if (YAO.ua.ie) {
            this.btnNext.style.backgroundImage = 'none';
        }
    }
    this.photoIntro.innerHTML = this.sIntro;
    YAO.setStyle(this.photoContainer, 'width', (width + 'px'));
    YAO.setStyles(this.photo, {
        width: width + 'px',
        height: height + 'px'
    });
    if (this.loadImg && this.loadShardow) {
        this.isLoading = false;
        this.photoContainer.removeChild(this.loadImg);
        this.loadImg = null;
        this.photoContainer.removeChild(this.loadShardow);
        this.loadShardow = null;
    }
};
YAO.YAlbum.prototype.Previous = function(){
    if (this.lastIndex !== 0) {
        this.lastIndex -= 1;
        if (YAO.hasClass(this.btnNext, this.BTN_DISABLED_CLASS)) {
            YAO.removeClass(this.btnNext, this.BTN_DISABLED_CLASS);
        }
        if (this.lastIndex >= 1) {
            this.btnPrevious.href = this.oSamples[this.lastIndex - 1].href;
        }
        if (this.lastIndex < 0) {
            this.lastIndex = 0;
            YAO.addClass(this.btnPrevious, this.BTN_DISABLED_CLASS);
            this.btnPrevious.href = this.oSamples[this.lastIndex].href;
        }
        this.btnNext.href = this.oSamples[this.lastIndex+1].href;
        this.chgPhoto();
    }
};
YAO.YAlbum.prototype.Next = function(){
    if (this.lastIndex < (this.length - 1)) {
        this.lastIndex += 1;
        if (YAO.hasClass(this.btnPrevious, this.BTN_DISABLED_CLASS)) {
            YAO.removeClass(this.btnPrevious, this.BTN_DISABLED_CLASS);
        }
        if (this.lastIndex <= (this.length - 2)) {
            this.btnNext.href = this.oSamples[this.lastIndex + 1].href;
        }
        if (this.lastIndex > (this.length - 1)) {
            this.lastIndex = (this.length - 1);
            YAO.addClass(this.btnNext, this.BTN_DISABLED_CLASS);
            this.btnNext.href = this.oSamples[this.lastIndex].href;
        }
        this.btnPrevious.href = this.oSamples[this.lastIndex-1].href;
        this.chgPhoto();
    }
};
YAO.YAlbum.prototype.chgPhoto = function(){
    var path = '';
    this.sIntro = this.oSamples[this.lastIndex].title;
    path = this.oSamples[this.lastIndex].href;
    YAO.removeClass(this.lastSample, 'current');
    YAO.addClass(this.oSamples[this.lastIndex], 'current');
    this.lastSample = this.oSamples[this.lastIndex];
    this.photo.src = path;
    this.load(path);
    this.scroll();
};
YAO.YAlbum.prototype.scroll = function(){
    var curScreen = Math.ceil(((this.lastIndex + 1) * this.oCarousel.itemWidth) / this.oCarousel.stepWidth) - 1;
    if (curScreen != this.oCarousel.movedNum) {
        this.oCarousel.scroll(curScreen);
        this.oCarousel.movedNum = curScreen;
        if (this.oCarousel.movedNum !== 0 && YAO.hasClass(this.oCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS)) {
            YAO.removeClass(this.oCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS);
        }
        else {
            if (this.oCarousel.movedNum === 0) {
                YAO.addClass(this.oCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS);
            }
        }
        if (this.oCarousel.movedNum !== this.oCarousel.maxMovedNum && YAO.hasClass(this.oCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS)) {
            YAO.removeClass(this.oCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS);
        }
        else {
            if (this.oCarousel.movedNum === this.oCarousel.maxMovedNum) {
                YAO.addClass(this.oCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS);
            }
        }
    }
};