淘宝网站特效之轮播图Word文档下载推荐.docx
《淘宝网站特效之轮播图Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《淘宝网站特效之轮播图Word文档下载推荐.docx(8页珍藏版)》请在冰豆网上搜索。
varp=CurrentStyle(this._container).position;
p=="
relative"
||p=="
absolute"
||(this._container.style.position="
);
this._container.style.overflow="
hidden"
;
this._slider.style.position="
如果没有设置Change切换参数属性,会自动根据滑动对象获取:
this.Change=this.options.Change?
this.options.Change:
this._slider[bVertical?
"
offsetHeight"
:
offsetWidth"
]/this._count;
执行Run方法就会开始进入切换,其中有一个可选参数用来重新设置要切换的图片索引:
index==undefined&
&
(index=this.Index);
index<
0&
(index=this._count-1)||index>
=this._count&
(index=0);
之后就到设置使用tween缓动时需要的参数了,
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量):
Code
还有Duration(持续时间)是自定义属性。
参数设置好后就执行Move程序开始移动了。
里面很简单,首先判断_c是否有值(等于0表示不需要移动)和_t是否到达Duration,
未满足条件就继续移动,否则直接移动到目标值并进行下一次切换:
使用说明
实例化需要3个参数,分别是容器对象,滑动对象和切换数量,之后可以直接执行Run方法运行:
newSlideTrans("
idContainer"
"
idSlider"
3).Run();
还有以下可选属性:
Vertical:
true,//是否垂直方向(方向不能改)
Auto:
true,//是否自动
Change:
0,//改变量
Duration:
50,//滑动持续时间
Time:
10,//滑动延时
Pause:
2000,//停顿时间(Auto为true时有效)
onStart:
function(){},//开始转换时执行
onFinish:
function(){},//完成转换时执行
Tween:
Tween.Quart.easeOut//tween算子
其中Vertical初始化后就不能修改,Tween算子可参照这里的缓动效果选择(实例中选了其中3个)。
还有提供了以下方法:
Next:
切换下一个
Previous:
切换上一个
Stop:
停止自动切换
还有上面说到的Run
程序代码:
var$$=function(id){
return"
string"
==typeofid?
document.getElementById(id):
id;
};
varExtend=function(destination,source){
for(varpropertyinsource){
destination[property]=source[property];
}
returndestination;
}
varCurrentStyle=function(element){
returnelement.currentStyle||document.defaultView.getComputedStyle(element,null);
varBind=function(object,fun){
varargs=Array.prototype.slice.call(arguments).slice
(2);
returnfunction(){
returnfun.apply(object,args.concat(Array.prototype.slice.call(arguments)));
varforEach=function(array,callback,thisObject){
if(array.forEach){
array.forEach(callback,thisObject);
}else{
for(vari=0,len=array.length;
i<
len;
i++){callback.call(thisObject,array[i],i,array);
varTween={
Quart:
{
easeOut:
function(t,b,c,d){
return-c*((t=t/d-1)*t*t*t-1)+b;
}
},
Back:
function(t,b,c,d,s){
if(s==undefined)s=1.70158;
returnc*((t=t/d-1)*t*((s+1)*t+s)+1)+b;
Bounce:
if((t/=d)<
(1/2.75)){
returnc*(7.5625*t*t)+b;
}elseif(t<
(2/2.75)){
returnc*(7.5625*(t-=(1.5/2.75))*t+.75)+b;
(2.5/2.75)){
returnc*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;
}else{
returnc*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;
}
//容器对象,滑动对象,切换数量
varSlideTrans=function(container,slider,count,options){
this._slider=$$(slider);
this._container=$$(container);
//容器对象
this._timer=null;
//定时器
this._count=Math.abs(count);
//切换数量
this._target=0;
//目标值
this._t=this._b=this._c=0;
//tween参数
this.Index=0;
//当前索引
this.SetOptions(options);
this.Auto=!
!
this.options.Auto;
this.Duration=Math.abs(this.options.Duration);
this.Time=Math.abs(this.options.Time);
this.Pause=Math.abs(this.options.Pause);
this.Tween=this.options.Tween;
this.onStart=this.options.onStart;
this.onFinish=this.options.onFinish;
varbVertical=!
this.options.Vertical;
this._css=bVertical?
top"
left"
//方向
//样式设置
varp=CurrentStyle(this._container).position;
p=="
this._container.style.overflow="
this._slider.style.position="
this.Change=this.options.Change?
this._slider[bVertical?
SlideTrans.prototype={
//设置默认属性
SetOptions:
function(options){
this.options={//默认值
Vertical:
Auto:
true,//是否自动
Change:
0,//改变量
Duration:
30,//滑动持续时间
Time:
10,//滑动延时
Pause:
3000,//停顿时间(Auto为true时有效)
onStart:
onFinish:
Tween:
Tween.Quart.easeOut//tween算子
};
Extend(this.options,options||{});
//开始切换
Run:
function(index){
//修正index
index==undefined&
index<
//设置参数
this._target=-Math.abs(this.Change)*(this.Index=index);
this._t=0;
this._b=parseInt(CurrentStyle(this._slider)[this.options.Vertical?
]);
this._c=this._target-this._b;
this.onStart();
this.Move();
//移动
Move:
function(){
clearTimeout(this._timer);
//未到达目标继续移动否则进行下一次滑动
if(this._c&
this._t<
this.Duration){
this.MoveTo(Math.round(this.Tween(this._t++,this._b,this._c,this.Duration)));
this._timer=setTimeout(Bind(this,this.Move),this.Time);
this.MoveTo(this._target);
this.Auto&
(this._timer=setTimeout(Bind(this,this.Next),this.Pause));
//移动到
MoveTo:
function(i){
this._slider.style[this._css]=i+"
px"
//下一个
Next:
this.Run(++this.Index);
//上一个
Previous:
this.Run(--this.Index);
//停止
Stop:
this.MoveTo(this._target);