javascript 图片幻灯片切换类：XScroll.js发布

首先说明，这是一个未完成版本。

最近一直在写这个XScroll.js，一直纠结于要不要发布出来，因为每次要发布的时候，我就觉得还没有写完善，还有bug，像个半吊子产品。但这两天我觉得，自己的javascript知识还是不足，如果等这个作品完善了才发布的话，我很担心要等到世界末日那天了。于是，我决定发布出来，当作学习过程的展示吧。

XScroll.js介绍：

XScroll是一个实现图片幻灯片切换的js类.目前支持(伪)13种切换效果。总代码量10KB。

这个类起源于我去年在淘宝电器城发现的效果，我发现他的幻灯片一直朝上滚动，就算从最后一张切换至第一张，也是向上。我对这种效果非常好奇，当时研究了半天还是不明所以。于是今年我就着手自己制作了。现在终于实现了他的效果，结果丫的现在又改版了！

虽然代码不一定优良，但说不定我的思路会带给你灵感（自我感觉良好...）,从而让高人们来实现我没完成的目标。

要使用XScroll来实现图片切换，你的html结构应该类似：

?

此时，你只需要下面一句代码，就能实现幻灯片切换效果：

?

var x3 = XScroll('idSlider4',{direct:2,how:3,fps:50,delay:3000,Tween:Tween.QuartOut});

XScroll.js参数说明：

1. 基本参数：XScroll(id,{})。其中id是一个元素的id值，字符串；第二个参数是一个对象，用来设置切换效果.以下均为第二个参数的子参数
2. how:切换效果。0淡入淡出，1两张图片同时滚动，2当前图片不动，下一张图片覆盖上来，3当前图片飞走，显示出下一张；4（未实现）当前图片与下一张图片反向拉伸，然后回切，完成切换
3. direct:方向，值为0123，分别表示左上右下，默认为0.在how参数不为0时有效
4. delay:自动滚动间隔时间。默认为4000
5. step:滚动步长。当滚动方向是水平时，step会默认为slider元素的offsetWidth；当滚动方向是垂直时，则默认为高度。当然，也可以自己设置
6. pager:值应该是一个元素的id,指定slider的页码翻页元素。指定后XScroll会为此标签的第一层子元素添加跳转函数
7. fps:帧率。默认为40
8. auto:自动滚动。默认为true.
9. ing:切换效果持续时间，越小则切换时间越短。默认为50
10. tween:缓动公式。这需要搭配缓动公式集合使用，如
11. pause:当鼠标指到slider上面时是否触发暂停。默认为true
12. event:触发页码翻页的事件。默认是mouseover（建议不要使用奇怪的事件)

先说说XScroll.js现在已经实现的功能：

1. 一个可复用的幻灯片切换类，已经基本完成
2. 目前支持4种特效
3. 凡是涉及到滚动的，均各自带有四个方向，左上右下(算上方向，是否可以说XScroll支持13种特效了？）
4. 支持页码翻页切换，也可扩展出上下页按钮
5. 支持自定义页码切换事件（不过只推荐click,mouseover之类的）

再说说XScroll.js的特色：

1. 始终朝1个方向滚动（意思是到了头不会回滚，不会变更方向），哪怕只有两张图片互相切换，也是始终朝设定的方向一直滚动
2. 不论下一张是第几张图片，都是一步到位——例如从第1张滚动到第5张，也是一个步长即可完成，不会跨越他们中间的图片
3. 声明时无需写new（根据snandy“读jQuery”系列的启发）

再说说XScroll.js现在还没有将来要实现的功能：

1. 更多的图片切换效果
2. 更多的方向，即把现在的4个方向扩展成8个方向,加入左上，右上，左下，右下
3. 会添加一个让切换效果随机的参数
4. 支持多张图片同时显示并滚动，比如同时显示三张图，且同时滚动三张图，或显示三张图滚动还是一张图——这一点功能很难，我怀疑会推翻我现在的架构
5. 更高的代码执行效率

下面说说我写XScroll.js的部分思路，废话较多，谨慎阅读：

一，首先我要实现的效果是：一步到位。就是上面说的无论当前图片与下一张图片间隔有多少张图片，都是一次滚动即到达目的地。

我的思路是这样：所有图片绝对定位，当页面载入完成后进行初始化，显示出第1张图片，并绝对定位到当前坐标；当静止时，只显示当前图片，其余图片隐藏；当开始运动时，即刻将下一张图片显示出来，并设置起点为相应的坐标；当运动终结时，设置刚才的"下一张“图片为显示，其余图片隐藏。如此循环

这样做的优点：每张图片单独滚动/变化，可以实现很多不同的切换效果

缺点：如果同时滚动两张图片，并采用较复杂的缓动公式，可能出现两张图不同步，有空白，也就是效率问题。如果同时滚动三张图...4张...5张...不敢想象。所以现阶段只有用来制作单张图片的切换，唉

二，实现朝左上右下4个方向滚动（重点）

这个初看很容易，因为图片都是绝对定位，那么设置他的left,top,right,bottom值不就能实现朝4个方向滚动了？

其实这种实现方式有问题。因为可能css里初始设置了图片的left或top值，这时候再设置他的right和bottom就郁闷了：图片会同时保持left值与right值，或者图片只认left而不管right!

通常情况下初始设置left与top很常见，所以如果有这个bug的话，无疑会经常出现在使用者眼前。

所以我转变了一下思路：往左滚或右滚时（水平滚动），都通过设置left实现；垂直方向滚动时，则都通过设置top实现。这样就避免了前面的bug。

但怎么实现这个思路呢？需要做一连串的改动

无疑，方向还是4个，XScroll.js里的direct分别用0123来代表左上右下，其中我们知道，右与左相反，下与上相反。于是我设置了一个参数，就叫fan,当direct大于1时，即方向为→或者下，就是相反。如果不相反，则fan=1;反之则fan=-1.

代码：

?

this.direct = ['left','top'][drt % 2];

this.fan = (drt > 1) ? -1 : 1;

方向现在可以反过来了，但还有个问题，就是当方向相反时，图片滚动的起点和终点就反过来了。比如，图片向左滚动时，当前图片起点为0，终点为-step；但方向反过来向右时，当前图片的起点还是0，终点却变成了step.

这时候前面的变量fan就起作用了，根据direct设置fan的值为1或-1，再用他乘以step，就能得到当前图片的终点（或下一张图片的起点）

至于相应切换效果时当前图片与下一张图片的起止点，就需要你自己思考了。

三，优化淡入淡出效果的思路

这个思路见我上一篇文章：淡入淡出效果的思路

四，怎么判断运动是否完成

这个我实现的非常麻烦。迄今为止，XScroll.js里的切换运动包括淡入淡出和坐标位移，只有判断淡入淡出完成且坐标位移也完成了，才执行下一步操作。

比如设置一个表示透明操作进行中的变量叫fading,位移进行中的变量叫moving，当他们都为0时，则运动完成；但同时运动的有两张图，所以这个变量每张图都要1个...

这导致出现了更多的变量与更多的判断。以后我会尽量优化这块儿。

我觉得制作图片切换效果应该避免的：

应避免把图片等全部用JS输出的思路.理由:不利于seo,且对新手来说增加理解难度；

翻页的页码可以用JS输出，但我推荐事先用html写出来，然后用JS绑定事件即可。理由：插入页码时会循环操作DOM，降低了JS运行效率；而且，有点图片切换的页码很奇怪，可能并不是数字，而是一些说明文字。见示例页的仿淘宝电器城效果。

下面说说我在写Xscroll.js过程中的其他：

当代码基本完成时，我发现一个怪现象：我让XScroll运行着不管它，然后切换到其他标签页上网什么的，过一会儿切换回来，就看到图片们好像偷懒被发现了一样疯狂的同时滚动好几张，然后恢复正常。让我怀疑是不是我不在这个标签页的时候，图片根本就不切换。

这个症状直接导致IE6下卡到报错（不知道是不是因为IEtester模拟的IE6是不是效率更低）。

本来我怀疑是不是我源码里的闭包导致了这个问题，但我又发现好像除了闭包我没其他办法实现。无奈，我只有从其他方面优化效率。

后来，我通过IE6的报错发现，如果切换正在进行中还没完成就调用下一次切换，就会出错。于是我干脆让他如果切换运动没有完成，则不进行下一次切换（其实这也合乎情理）。

然后，我发现前面说的症状就消失了。虽然有时候IE6下还是卡的一顿一顿的，但一直不会报错。

后记：

因为IEtester模拟的IE6不支持透明度，所以有关透明的切换效果不知道在IE6下是否准确；

思路（或者说架构）真的很重要；

以后我应该会为XScroll.js添加更多的特效；

我打算另外写一个类，用来实现我的另一种思路，且支持多张图片同时切换；XScroll.js，就用来制作单张图片切换效果吧。希望我能加油,希望所有coder们能走的更远。