JavaScript 图片滑动切换效果

序一（08/07/06）

看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。 由于有了做图片滑动展示效果的经验，做这个就容易得多了。

序二（09/03/19）

自写了Tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。 除了改成Tween缓动，也改进了程序算法，不过原理还是一样的。

效果预览

仿淘宝/alibaba图片切换： 默认缓动方式1方式2

 

程序说明

原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。

首先需要一个容器，程序会自动设置容器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切换参数属性，会自动根据滑动对象获取：

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 );

== undefined && (index = this.Index); index < 0 && (index = this._count - 1) || index >= this._count && (index = 0);

之后就到设置使用tween缓动时需要的参数了， 包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：

Code 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;

还有Duration(持续时间)是自定义属性。

参数设置好后就执行Move程序开始移动了。 里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration， 未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：

Code 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); }else{     this.MoveTo(this._target);     this.Auto && (this._timer = setTimeout(Bind(this, this.Next), this.Pause)); }

 

使用说明

实例化需要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: function(){},//完成转换时执行 Tween:  Tween.Quart.easeOut//tween算子

其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。

还有提供了以下方法： Next: 切换下一个 Previous: 切换上一个 Stop: 停止自动切换 还有上面说到的Run

 

程序代码

Code var SlideTrans = 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;          var bVertical = !!this.options.Vertical;     this._css = bVertical ? "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[bVertical ? "offsetHeight" : "offsetWidth"] / this._count; }; SlideTrans.prototype = {   //设置默认属性  SetOptions: function(options) {     this.options = {//默认值        Vertical:    true,//是否垂直方向（方向不能改）        Auto:        true,//是否自动        Change:        0,//改变量        Duration:    50,//滑动持续时间        Time:        10,//滑动延时        Pause:        2000,//停顿时间(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._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);     }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);   } };

 

下载测试代码 其他图片展示效果：JavaScript 图片变换效果(ie only)JavaScript 图片滑动展示效果

转载于:https://www.cnblogs.com/cloudgamer/archive/2008/07/06/SlideTrans.html

相关资源：数据结构—成绩单生成器