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

-------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');//工具箱,按钮触动的,向前或是向后滑动,有终点,到终点将不能再动,只能按反方向按钮回退