XScroll.js更新：加入交错切换效果,附思路
十年灯
只做简单的事
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是否到达指定位置。
以上，就是交错切换的实现思路。累死了。
不知道有没有效率更好的方法，希望大牛们给我指点一二。
XScroll官方更新日志
分类: Javascript
标签: javascript , 图片切换 , 幻灯片切换效果 , XScroll.js , 交错切换效果
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于XScroll.js更新：加入交错切换效果,附思路的详细内容...