具有前后按钮切换+头图切换联动通用接口(应付不同的联动需要)的图片滑动效果

-------scroll_tween.js----------

CHRD.scroll.tween = function() {
    var Tween = {
        Quart: {
            easeOut: function(t,b,c,d){
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            }
        },
        Back: {
            easeOut: function(t,b,c,d,s){
                if (s == undefined) s = 1.70158;
                return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
            }
        },
        Bounce: {
            easeOut: function(t,b,c,d){
                if ((t/=d) < (1/2.75)) {
                    return c*(7.5625*t*t) + b;
                } else if (t < (2/2.75)) {
                    return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
                } else if (t < (2.5/2.75)) {
                    return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
                } else {
                    return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
                }
            }
        }
    }
    //容器对象结构必须是:<tag id="imgBox"><tag title="slider"><tag>1</tag><tag>...</tag><tag>N</tag></tag></tag>
    var SlideTrans = function(imgBox, ops) {
        this.single = 0;//imgbox是单列,像头图
        this._slider = CHRD.firstHtml(imgBox);//图片table
        this._container = imgBox;//imgBox
        this._timer = null;//定时器
        this._target = 0;//目标值
        this._t = this._b = this._c = 0;//tween参数
        this.Duration = 50;//滑动持续时间
        this.Time = 10;//滑动延时
        this.Tween = Tween.Bounce.easeOut;//算子        
        this.bVertical = false;//是否垂直滚动
        
        if (ops) {
            for (var p in ops) {
                (ops[p] !== null) && (this[p] = ops[p]);
            }
        }
        
        var pxName = this.bVertical ? "offsetHeight" : "offsetWidth";
        var pxside = this.bVertical ? "offsetTop" : "offsetLeft";
        this._css = this.bVertical ? "top" : "left";//方向
        //imgBox样式设置
        var p = CHRD.currentStyle(this._container).position;
        p == "relative" || p == "absolute" || (this._container.style.position = "relative");
        this._container.style.overflow = "hidden";
        this._slider.style.position = "absolute";
        this._slider.style.top = "0px";//防止ie下页首次取不值
        this._slider.style.left = "0px";
        this.maxMove = this._slider[pxName] - imgBox[pxName];//最大可移动值
        this.pxs = [0];//最首边是位移0
        var child = CHRD.firstHtml(this._slider);//第一个永远是0
        
        while (child = CHRD.nextHtml(child)) {//计算每次滚动终点px
            this.pxs.push(child[pxside]);           
            if (!this.single && (child[pxside] > this.maxMove)) break;//不再获取位移已经超导致空白出现
        }
    };
    SlideTrans.prototype = {
        run: function(index) {       
            this._b = parseInt(CHRD.currentStyle(this._slider)[this._css]);//当前的定位
            this._target = -this.pxs[this.Index = index];//停止位置
            this._t = 0;//初始化算子变化次数
            this._c = this._target - this._b;//算子变化范围
            this.move();
        },
        //移动
        move: function() {
            clearTimeout(this._timer);
            if (this._c && this._t < this.Duration) {//还有变化范围与次数
                this.move2(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));//变幻
                this._timer = setTimeout(CHRD.bindFunc(this, this.move), this.Time);//下次算子
            }else{//算子停摆位置
                this.move2(this._target);
            }
        },
        move2: function(i) { this._slider.style[this._css] = i + "px"; },
        next: function() {
            if (this.Index + 1 >= this.pxs.length) return;//最尾边
            this.run(isNaN(this.Index) ? 1 : ++this.Index);//初始化时是1,其它情况++
        },
        prev: function() {
            if (isNaN(this.Index) || !this.Index) return;//初始时/0时,都是在最首边
            this.run(--this.Index);
        }
        ,auto: function(index) {
            clearInterval(this.autoer);//防止重复触发
            
            if (index > 0) {//停止在某个图片上
                this.run(index - 1);
                this.tipFunc.call(this, index);//通知当前下标[从1开始]
            } else {//自动滚动
                _this = this;
                this.autoer = setInterval(function() {
                    if (isNaN(index = _this.Index *1 + 1)) {//初始化
                        index = 1;
                    } else if (index >= _this.pxs.length) {//超尾
                        index = 0;//从头开始
                    }
                    
                    _this.run(index);
                    _this.tipFunc.call(_this, index + 1);//通知当前下标[从1开始]
                }, this.autoDelay);
            }
        }
    };
    //绑定上个,下个
    return  {
       bt:function (prevBt, body, nextBt) {//左右点击
            var st = new SlideTrans(CHRD.getObj(body));
            CHRD.getObj(prevBt).onclick = function(){ st.prev() };
            CHRD.getObj(nextBt).onclick = function(){ st.next() };
        }
       ,box:function(body, tipFunc, option) {//灯箱 返回st对象,开始st.auto(), 暂停st.auto(下标[从1开始]);切换时回调tipFunc(切换到的当前对象下标[从1开始]);
            option = option || {};
            option.autoDelay = option.autoDelay * 1 || 2000;
            option.Tween = Tween.Back.easeOut;
            option.tipFunc = tipFunc;
            option.single = 1;//头图是单行
            var st = new SlideTrans(CHRD.getObj(body), option);
            return st;
       }
    }
}();

 

------------应用---------

/*
 * //box的子对象是block左右浮动,js设置box合适所有子对象宽度
 */
CHRD.floatWidth = function(boxId) {    
    for (var i = 0, scrollW = 0, child = CHRD.firstHtml(boxId), lists = child.childNodes; i < lists.length; i++)
        lists[i].tagName && (scrollW += lists[i].offsetWidth);
    child.style.width = scrollW + 'px';
}

(function(){
    CHRD.floatWidth('indexImgBox');//浮动对象maxwidth,block浮动对象,需要使用js
    var imgs = CHRD.firstHtml(CHRD.getObj('indexImgBox')).getElementsByTagName('img');
    var title = CHRD.getObj('imgBoxTitle');
    var boxer = CHRD.scroll.tween.box('indexImgBox', function(index){//切换完成的回调,用于处理各种与当前图片相关的事情,如输出本图片信息,切换数字下标==
        title.innerHTML = imgs[index - 1].alt;//显示标题
        prevNum.className = '';//恢复上个数字
        (prevNum = bts[index - 1]).className = 'hover';//改变数字样式
    });
    var num = CHRD.getObj('imgBoxBt');
    var bts = [];
    
    for (var i = 1; i <= imgs.length; i++) {//生成数字对象,不把数字生成放到里面是,因为如有时可能想生成一个略图样的此标感应系列,
        var index = document.createElement('i');
        index.innerHTML = i;
        index = num.appendChild(index);
        index.onmouseover = function() { boxer.auto(this.innerHTML);}
        index.onmouseout = function() {boxer.auto();}
        bts.push(index);
    }
    var prevNum = bts[0];
    prevNum.className = 'hover';
    boxer.auto();//头图
})();

CHRD.floatWidth('toolBody');//浮动对象maxwidth
CHRD.scroll.tween.bt('toolPrev', 'toolBody', 'toolNext');//工具箱,按钮触动的,向前或是向后滑动,有终点,到终点将不能再动,只能按反方向按钮回退