XScroll.js更新：加入交错切换效果,附思路

原XScroll发布文见此：http://www.cnblogs.com/lixlib/archive/2012/03/21/javascript-tupian-qiehuan-xscroll_js.html

2012-4-13：

加入了交错切换效果。看第一个例子——现在我可以说XScroll.js支持17种切换效果了吗。。。还是心虚

所谓的交错切换，就是当前图片向左移动，下一张图片向右移动，各自移动到一半时，就都往回移动，但此时图片叠加顺序改变，下一张图片将覆盖当前图片。

交错切换也支持4个方向。

交错切换的实现思路：

首先，不可避免的要同时操作两张图片：当前图片与下张图片，分别叫curS与nextS吧。我用向左滚动来举例，滚动发生前，把下张图片设为显示——但排在当前图片下面所以你看不到。两张图片的起始位置，都是0，这个很好理解。

滚动要开始了，两张图片向相反的方向滚动，所以这时两张图片各需要一个终点。由于不能让两张图片拉开过度结果变成两半了，所以他们各自移动的距离加起来应该不能超过图片区总宽度，当然，最好是等于总宽度，不多不少。

为了省事，我直接设他们的滚动距离为图片区总宽度的一半。例如当前图片向左滚200，下张图片向右滚200，总宽度为400。现在可以看到，当前图和下张图的终点位置是相反的：一个-200，一个200.所以只要设置其中一个的终点值，另一个加个负号就可以了。

因为他们滚动到终点位置时，需要改变方向，往回滚。所以我加入一个变量来决定是否该往回滚了，叫yes，当yes为假时，就可以往回滚了。

var t = 0, b0 = 0, //起点 c = curS.e-b0, //移动距离,curS.e表示curS的终点，提前赋值 ing = 50, direct = this.direct, speed = this.speed, //pos = { }, yes = 1;

继续，编写滚动函数。滚动函数的第一步，就是判断yes，以便后面的操作。

function runing(){ if(yes) { } else { } }

我们知道，当yes为真的时候，curS与nextS应该“劳燕分飞”向两边跑，此时他们的起点都是0，终点是相反的，所以移动距离也完全相反.

if(yes) { curS.style[direct] = Math.floor(tween(t++,b0,c,ing)) +'px'; nextS.style[direct] = Math.floor(tween(t++,b0,-c,ing))+'px'; setTimeout(runing,speed); }

大家看上面的代码，其中tween是，b0是起点，c是移动距离，由于nextS的移动距离与curS的相反，所以nextS的移动距离就是-c.

当然，这个函数还是不行的，不能因为yes就一直往两边跑啊，要判断什么时候把yes给变成false，往回跑。

因为有缓动公式的存在，所以我们判断往回跑的时机很简单，即t++已经超过了ing（即动画执行完毕了）。

if(yes) { if(t < ing){ curS.style[direct] = Math.floor(tween(t++,b0,c,ing)) +'px'; nextS.style[direct] = Math.floor(tween(t++,b0,-c,ing))+'px'; setTimeout(runing,speed); } else { yes = 0; t = 0; curS.style.zIndex = 5; nextS.style.zIndex = 10; setTimeout(runing,speed); } }

动画完毕（即curS与nextS分别到达终点），此时就可以把yes变成false了；由于t一直在++变得很大，所以我们把t再次设为初始值0；而且，往回滚的时候，当前图就应该隐蔽到下张图的下面了，所以改变他们各自的zIndex；最后，不要忘了再次调用函数执行，不然图片就回不去了。

回滚的时候要注意，现在curS的起点变成了他原来的终点，nextS的起点也变成了nextS自己的终点，但他们现在的终点就变成了他们原来的起点了，就是0.同时，由于是往回滚，所以他们的移动距离也就反过来了。

function runing(){ if(yes) { if(t < ing){ curS.style[direct] = Math.floor(tween(t++,b0,c,ing)) +'px'; nextS.style[direct] = Math.floor(tween(t++,b0,-c,ing))+'px'; setTimeout(runing,speed); } else { yes = 0; t = 0; curS.style.zIndex = 5; nextS.style.zIndex = 10; setTimeout(runing,speed); } } else { if(t < ing ){ curS.style[direct] = Math.floor(tween(t++,curS.e,-c,ing)) +'px'; nextS.style[direct] = Math.floor(tween(t++,nextS.e,c,ing))+'px'; setTimeout(runing,speed); } else { yes = 1; t = 0; nextS.style[direct] = 0; curS.style[direct] = 0; root.after(); } } }

回滚也是需要结束的，可以也通过动画执行时间是否完毕来判断（建议增加更严格的判断条件，如curS的坐标已经超过0了），回滚结束要做的事：把yes变回true；把t变回0；调用收尾函数；同时，你也可以再次确认下curS与nextS是否到达指定位置。

以上，就是交错切换的实现思路。累死了。

不知道有没有效率更好的方法，希望大牛们给我指点一二。