淘宝网站特效之轮播图.docx

1、淘宝网站特效之轮播图淘宝网站特效之轮展图制作与剖析 姓名：张涛 学号：1210831220 班级：12信管2 日期：2013年11月21日轮播图介绍：将需要展示的图片自动切换展示轮播图示例：过2两秒钟自动切换为下一张图片每隔一段时间自动切换到下一张图片轮播图的作用：1. 能引起用户的留意，成为眼球的焦点2. 轻易将网站当下高质量的内容推送给目标用户，能在第一时间内 吸引用户的留意3.用户第一眼的感官感慨感染，直接推送给他，对于我们留住有效用户所施展的作用长短非常大的轮播图的制作：原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。首先需要一个容器，程

2、序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，滑动对象会设置为绝对定位：var p = CurrentStyle(this._container).position;p = relative | p = absolute | (this._container.style.position = relative);this._container.style.overflow = hidden;this._slider.style.position = absolute;如果没有设置Change切换参数属性，会自动根据滑动对象获

3、取：this.Change = this.options.Change ? this.options.Change : this._sliderbVertical ? offsetHeight : offsetWidth / this._count;执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：index = undefined & (index = this.Index);index = this._count & (index = 0);之后就到设置使用tween缓动时需要的参数了，包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)

4、：Code还有Duration(持续时间)是自定义属性。参数设置好后就执行Move程序开始移动了。里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration，未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：Code 使用说明实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：new SlideTrans(idContainer, idSlider, 3).Run();还有以下可选属性：Vertical: true,/是否垂直方向（方向不能改）Auto: true,/是否自动Change: 0,/改变量Duration:

5、 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 =

6、typeof id ? document.getElementById(id) : id;var Extend = function(destination, source) for (var property in source) destinationproperty = sourceproperty; return destination;var CurrentStyle = function(element) return element.currentStyle | document.defaultView.getComputedStyle(element, null);var Bi

7、nd = function(object, fun) var args = Array.prototype.slice.call(arguments).slice(2); return function() 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

8、 i = 0, len = array.length; i len; i+) callback.call(thisObject, arrayi, i, array); 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:

9、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; /容器对象,滑动对象,切换数量var SlideTrans = function(c

10、ontainer, 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; t

11、his.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; var bVertical = !this.options.Vertical; this._css = bVertic

12、al ? top : left;/方向 /样式设置 var p = 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

13、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(),/开始转换时执行 onFinis

14、h: function(),/完成转换时执行 Tween: Tween.Quart.easeOut/tween算子 ; Extend(this.options, options | ); , /开始切换 Run: function(index) /修正index index = undefined & (index = this.Index); index = this._count & (index = 0); /设置参数 this._target = -Math.abs(this.Change) * (this.Index = index); this._t = 0; this._b =

15、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._t this.Duration) this.MoveTo(Math.round(this.Tween(this._t+, this._b, this.

16、_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.stylethis._css = i + px; , /下一个 Next: function() this.Run(+this.Index); , /上一个 Previous: function() this.Run(-this.Index); , /停止 Stop: function() clearTimeout(this._timer); this.MoveTo(this._target); ;