淘宝网站特效之轮播图Word文档下载推荐.docx

1、var p = 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._sliderbVertical ? offs

2、etHeight :offsetWidth / this._count;执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：index = undefined & （index = this.Index）;index = this._count & （index = 0）;之后就到设置使用tween缓动时需要的参数了，包括_target（目标值）、_t（时间）、_b（初始值）和_c（变化量）：Code还有Duration（持续时间）是自定义属性。参数设置好后就执行Move程序开始移动了。里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Durat

3、ion，未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：使用说明实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：new SlideTrans（idContainer, idSlider, 3）.Run（）;还有以下可选属性：Vertical: true,/是否垂直方向（方向不能改）Auto: true,/是否自动Change: 0,/改变量Duration: 50,/滑动持续时间Time: 10,/滑动延时Pause: 2000,/停顿时间（Auto为true时有效）onStart: function（）,/开始转换时执行onFinish:

4、function（）,/完成转换时执行Tween: Tween.Quart.easeOut/tween算子其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。还有提供了以下方法：Next: 切换下一个Previous: 切换上一个Stop: 停止自动切换还有上面说到的Run程序代码：var $ = function （id） return string = typeof id ? document.getElementById（id） : id;var Extend = function（destination, source） for （va

5、r property in source） destinationproperty = sourceproperty; return destination;var CurrentStyle = function（element） return element.currentStyle | document.defaultView.getComputedStyle（element, null）;var Bind = function（object, fun） var args = Array.prototype.slice.call（arguments）.slice（2）; return fu

6、nction（） return fun.apply（object, args.concat（Array.prototype.slice.call（arguments）;var forEach = function（array, callback, thisObject） if（array.forEach） array.forEach（callback, thisObject）; else for （var i = 0, len = array.length; i len; i+） callback.call（thisObject, arrayi, i, array）;var Tween = Q

7、uart: 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; return c*（t=t/d-1）*t*（s+1）*t + s） + 1） + b; Bounce: 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; （2.5/

8、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; /容器对象,滑动对象,切换数量var SlideTrans = function（container, slider, count, options） this._slider = $（slider）; this._container = $（container）;/容器对象 this._timer = null;/定时器 this._count = Math.abs（co

9、unt）;/切换数量 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 = t

10、his.options.Tween; this.onStart = this.options.onStart; this.onFinish = this.options.onFinish; var bVertical = !this.options.Vertical; this._css = bVertical ?topleft/方向 /样式设置 var p = CurrentStyle（this._container）.position; p = this._container.style.overflow = this._slider.style.position = this.Chang

11、e = this.options.Change ? this._sliderbVertical ?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算子 ; Exte

12、nd（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.M

13、ove（）; /移动 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.stylethis._css = i + px /下一个 Next: this.Run（+this.Index）; /上一个 Previous: this.Run（-this.Index）; /停止 Stop: this.MoveTo（this._target）;