看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。由于有了做图片滑动展示效果的经验,做这个就容易得多了。
效果预览
仿淘宝/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); }
};
下载测试代码
本文链接:http://www.cnblogs.com/oooweb/p/javascript-image-slider.html
原文出处:cloudgamer
《JavaScript 实战》:JavaScript 图片滑动切换效果,布布扣,bubuko.com
《JavaScript 实战》:JavaScript 图片滑动切换效果