《javascript图片滑动切换效果》由会员分享，可在线阅读，更多相关《javascript图片滑动切换效果（10页珍藏版）》请在金锄头文库上搜索。
1、JavaScript 图片滑动切换效果序一（08/07/06）看到alibaba的一个图片切换效果，感觉不错，想拿来用用。但代码一大堆的，看着昏，还是自己来吧。由于有了做图片滑动展示效果的经验，做这个就容易得多了。序二（09/03/19）自写了Tween缓动之后就很想重新写过这个效果，近来有点时间，终于可以动手了。除了改成Tween缓动，也改进了程序算法，不过原理还是一样的。程序说明原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。首先需要一个容器，程序会自动设置容器overflow为hidden，如果不是相对或绝对定位会同时设置position为
2、relative，滑动对象会设置为绝对定位：varp=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
3、bVertical?offsetHeight:offsetWidth/this._count;执行Run方法就会开始进入切换，其中有一个可选参数用来重新设置要切换的图片索引：index=undefined&(index=this.Index);index=this._count&(index=0);之后就到设置使用tween缓动时需要的参数了，包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量)：this._target=-Math.abs(this.Change)*(this.Index=index);this._t=0;this._b=parseInt(Current
4、Style(this._slider)this.options.Vertical?top:left);this._c=this._target-this._b;还有Duration(持续时间)是自定义属性。参数设置好后就执行Move程序开始移动了。里面很简单，首先判断_c是否有值（等于0表示不需要移动）和_t是否到达Duration，未满足条件就继续移动，否则直接移动到目标值并进行下一次切换：if(this._c&this._tthis.Duration)this.MoveTo(Math.round(this.Tween(this._t+,this._b,this._c,this.Durati
5、on);this._timer=setTimeout(Bind(this,this.Move),this.Time);elsethis.MoveTo(this._target);this.Auto&(this._timer=setTimeout(Bind(this,this.Next),this.Pause);使用说明实例化需要3个参数，分别是容器对象，滑动对象和切换数量，之后可以直接执行Run方法运行：newSlideTrans(idContainer,idSlider,3).Run();还有以下可选属性：Vertical:true,/是否垂直方向（方向不能改）Auto:true,/是否自动
6、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程序代码varSlideTrans=function(c
7、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;this.Duration=Math.abs(this.option
8、s.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;varbVertical=!this.options.Vertical;this._css=bVertical?top:left;/方向/样式设置varp=CurrentStyle(this._container).po
9、sition;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._sliderbVertical?offsetHeight:offsetWidth/this._count;SlideTrans.prototype=/设置默认属性SetOptions:func
10、tion(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
11、index=undefined&(index=this.Index);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
12、._timer);/未到达目标继续移动否则进行下一次滑动if(this._c&this._tthis.Duration)this.MoveTo(Math.round(this.Tween(this._t+,this._b,this._c,this.Duration);this._timer=setTimeout(Bind(this,this.Move),this.Time);elsethis.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()
