融合渐变轮播图和左右点击轮播图的js

 

2013-06-16

window.onload = function(){
    var homekvCenter = new HomekvCenter({
        type:"opacity",
        id:"homekvCenter",
        domName:"li",
        btnName:"span",
        addClass:"active",
        time:4000
    });
    var introGallery = new HomekvCenter({
        type:"move",
        id:"galleryContent",
        domName:"li",
        btnName:null,
        addClass:null,
        preBtnId:"introPre",
        nextBtnId:"introNext",
        time:4000
    });
    var gallery = new HomekvCenter({
        type:"move",
        id:"gallery",
        domName:"li",
        btnName:null,
        addClass:null,
        preBtnId:"galleryPre",
        nextBtnId:"galleryNext",
        time:4000
    });
}
function HomekvCenter(vArg){
    this.type = vArg.type;
    this.id = getId(vArg.id);
    this.domName = getDom("li",this.id);
    this.btnName = vArg.btnName?getDom("span",this.id):null;
    this.index = 0;
    this.addClass = vArg.addClass?vArg.addClass:null;
    this.preBtn = vArg.preBtnId?getId(vArg.preBtnId):null;
    this.nextBtn = vArg.nextBtnId?getId(vArg.nextBtnId):null;
    this.time = vArg.time;
    var _this = this;
    if( this.type != "opacity"){
        this.firstWidth = this.domName[0].offsetWidth;
        this.id.children[0].style.width = this.domName.length*this.domName[0].offsetWidth+"px";
    }
    if(this.btnName != null){
        this.btnHover();
    }
    if(this.preBtn != null){
        this.preNextBtn();
    }
    this.interTime = setInterval(function(){
        _this.gotoImg((_this.index+1)%_this.domName.length);
    },this.time);
}
HomekvCenter.prototype.gotoImg = function(index){
     var _this = this;
    for(var i=0;i<this.domName.length;i++){
        if(this.btnName != null){
            this.btnName[i].className = "";
        }
        if(this.type == "opacity"){
            (function(count){
                move(_this.domName[count],{"opacity":0});
            })(i);
        }else{
            move(this.id.children[0],{"left":-this.firstWidth});
        }
    }
    if(this.btnName != null){
        this.btnName[index].className=this.addClass;
    }
    if(this.type == "opacity"){
        move(this.domName[index],{"opacity":100});    
    }
    this.index = index;
}
HomekvCenter.prototype.btnHover = function(){
    var _this = this;
    for(var i=0;i<this.btnName.length;i++){
        this.btnName[i].index=i;
        this.btnName[i].onmouseover=function(){
            clearInterval(_this.interTime);
            _this.gotoImg(this.index);
        };
        this.btnName[i].onmouseout = function(){
            clearInterval(_this.interTime);
            _this.interTime=setInterval(function(){
                _this.gotoImg((_this.index+1)%(_this.domName.length));
            },_this.time);
        }
    }
}
HomekvCenter.prototype.preNextBtn = function(){
    var _this = this;
    this.nextBtn.onclick = function(){
        clearInterval(_this.interTime);
        move(_this.id.children[0],{"left":-(_this.firstWidth)},function(){
            _this.id.children[0].appendChild(_this.domName[0]);
            _this.id.children[0].style.left = "0px";
        });
    }
    this.preBtn.onclick = function(){
        clearInterval(_this.interTime);
        _this.id.children[0].insertBefore(_this.domName[_this.domName.length-1],_this.domName[0]);
        _this.id.children[0].style.left = - (_this.firstWidth) + "px";
        move(_this.id.children[0],{"left":0});
    }
    this.id.children[0].onmouseout = function(){
        _this.gotoImg();
    }    
}
function move(obj,json,fn){
    clearInterval(obj.timer)
    obj.timer=setInterval(function(){
        var bStop=true;
        for(var attr in json){
            var iCur=0;
            if(attr=="opacity"){
                iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
            }else{
                iCur=parseInt(getStyle(obj,attr));
            }
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
            if(iCur!=json[attr]){
                bStop=false;
            }
            if(attr=="opacity"){
                obj.style.filter="alpha(opacity:"+(iCur+iSpeed)+")";
                obj.style.opacity=(iCur+iSpeed)/100;
            }else{
                obj.style[attr]=iCur+iSpeed+"px";
            }
        }
        
        if(bStop){
            clearInterval(obj.timer);
            if(fn){
                fn();
            }
        }
    },30)
}
function getStyle(obj,attr){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}
function getId(id){
    return document.getElementById(id);
}
function getDom(domName,obj){
    var obj = obj || document;
    return obj.getElementsByTagName(domName);
}