淘宝网站特效之轮播图.docx
《淘宝网站特效之轮播图.docx》由会员分享，可在线阅读，更多相关《淘宝网站特效之轮播图.docx（8页珍藏版）》请在冰豆网上搜索。
淘宝网站特效之轮播图
淘宝网站特效之轮展图制作与剖析
姓名：
张涛
学号：
1210831220
班级：
12信管2
日期：
2013年11月21日
轮播图介绍：
将需要展示的图片自动切换展示
轮播图示例：
过2两秒钟自动切换为下一张图片
每隔一段时间自动切换到下一张图片
轮播图的作用：
1.能引起用户的留意，成为眼球的焦点
2.轻易将网站当下高质量的内容推送给目标用户，能在第一时间内吸引用户的留意
3.用户第一眼的感官感慨感染，直接推送给他，对于我们留住有效用户所施展的作用长短非常大的
轮播图的制作：
原理就是通过不断设置滑动对象的left（水平切换）和top（垂直切换）来实现图片切换的动态效果。
首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，
滑动对象会设置为绝对定位：
varp=CurrentStyle（this._container）.position;
p=="relative"||p=="absolute"||（this._container.style.position="relative"）;this._container.style.overflow="hidden";this._slider.style.position="absolute";
如果没有设置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，
未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：
Code
使用说明
实例化需要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}
}
varTween={
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;
returnc*（（t=t/d-1）*t*（（s+1）*t+s）+1）+b;
}
},
Bounce:
{
easeOut:
function（t,b,c,d）{
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;
}elseif（t<（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=="relative"||p=="absolute"||（this._container.style.position="relative"）;
this._container.style.overflow="hidden";
this._slider.style.position="absolute";
this.Change=this.options.Change?
this.options.Change:
this._slider[bVertical?
"offsetHeight":
"offsetWidth"]/this._count;
};
SlideTrans.prototype={
//设置默认属性
SetOptions:
function（options）{
this.options={//默认值
Vertical:
true,//是否垂直方向（方向不能改）
Auto:
true,//是否自动
Change:
0,//改变量
Duration:
30,//滑动持续时间
Time:
10,//滑动延时
Pause:
3000,//停顿时间（Auto为true时有效）
onStart:
function（）{},//开始转换时执行
onFinish:
function（）{},//完成转换时执行
Tween:
Tween.Quart.easeOut//tween算子
};
Extend（this.options,options||{}）;
},
//开始切换
Run:
function（index）{
//修正index
index==undefined&&（index=this.Index）;
index<0&&（index=this._count-1）||index>=this._count&&（index=0）;
//设置参数
this._target=-Math.abs（this.Change）*（this.Index=index）;
this._t=0;
this._b=parseInt（CurrentStyle（this._slider）[this.options.Vertical?
"top":
"left"]）;
this._c=this._target-this._b;
this.onStart（）;
this.Move（）;
},
//移动
Move:
function（）{
clearTimeout（this._timer）;
//未到达目标继续移动否则进行下一次滑动
if（this._c&&this._tthis.MoveTo（Math.round（this.Tween（this._t++,this._b,this._c,this.Duration）））;
this._timer=setTimeout（Bind（this,this.Move）,this.Time）;
}else{
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:
function（）{
this.Run（++this.Index）;
},
//上一个
Previous:
function（）{
this.Run（--this.Index）;
},
//停止
Stop:
function（）{
clearTimeout（this._timer）;this.MoveTo（this._target）;
}
};
升级会员 