序一（08/07/06）
看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。
自写了Tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。
效果预览
仿淘宝/alibaba图片切换：
默认缓动
方式1
方式2
程序说明
原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。
首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为relative，
var p = CurrentStyle( this ._container).position; == " 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;
index == undefined && (index = this .Index); 0 && (index = this ._count - 1 ) || index >= this ._count && (index = 0 );
== undefined && (index = this .Index); 0 && (index = this ._count - 1 ) || index >= this ._count && (index = 0 );
之后就到设置使用tween缓动时需要的参数了，
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;
参数设置好后就执行Move程序开始移动了。
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));
使用说明
立即学习 “Java免费学习笔记（深入） ”；
CSS3菜单悬停滑动效果图片
CSS3菜单悬停滑动效果导航，以多种彩色条纹色彩为背景，具有滚动和悬停效果的动画菜单，上下滚动效果的菜单简约又实用，适合各种电商产品分类导航使用。
下载
实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：
new SlideTrans( " idContainer " , " idSlider " , 3 ).Run();
其中Vertical初始化后就不能修改，Tween算子可参照这里的缓动效果选择（实例中选了其中3个）。
还有提供了以下方法：
程序代码
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; == " 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; = { // 设置默认属性 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算子 }; this .options, options || {}); // 开始切换 Run: function (index) { // 修正index index == undefined && (index = this .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 () { 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 () { this ._timer); this .MoveTo( this ._target);
Code
Code
