JavaScript 图片滚动切换：基于单步滚动的精简实现思路

传统图片滚动方案及其局限

首先探讨一种常见的实现方式：

将所有图片包裹在 ul 等容器内，并设置浮动（float）。接着将该 ul 设置为绝对定位（absolute），其父容器设为相对定位（relative）。通过调整 ul 的 left 或 top 属性值，即可实现图片队列的整体滚动效果。

这种方案具有以下特点：

仅操作单一 HTML 元素（即上述的 ul），系统开销较低；当滚动至末尾时会自动回滚；从大序号向小序号滚动时同样会触发回滚；若从最后一个序号跳转至第一个，中间经过的所有图片会瞬间闪过。

另一种思路则是我在 XScroll.js 中采用的方案，即所有图片均使用绝对定位。具体细节可参考相关文章。

XScroll.js 开发完成后，我始终认为其系统消耗存在隐患，因为每次图片切换通常需同时操作两张图片。因此，我尝试编写一个精简版本，但又不希望采用前文提到的普通方案。

单步滚动新思路与实现原理

后来，我在土豆女性频道偶然发现了另一种图片滚动切换的实现思路。

该方案的特点如下：

无论从一个序号跳转到哪个序号，始终只滚动一个步长。例如，从第 1 张到第 2 张，或从第 1 张直接跳到第 3 张，都只执行一个步长的滚动。即使中间有其他图片，也不会出现视觉跳跃；当然，滚动至尽头时也会回滚，但回滚同样仅涉及一个步长。

这一效果看似巧妙，我研究其 HTML 结构后发现，其实现方式比我的 XScroll.js 更为简便。

 
<ul id="idSlider2">
<li style=""><a href="http://office.jb51.net/"><img src="../s1.jpg"/></a></li>
<li><a href="http://jb51.net/"><img src="../s2.jpg"/></a></li>
<li><a href="http://baidu.com/"><img src="../s3.jpg"/></a></li>
<li><a href="http://sc.jb51.net/"><img src="../s4.jpg"/></a></li>
</ul>

HTML 结构非常普通；前端的定位方式与最普通的思路一致，即所有图片均设置 float:left。但 JavaScript 部分存在关键差异：仅显示当前图片，隐藏其余图片。当需要滚动时，显示下一张图片，并判断下一张图片位于当前图片的前方还是后方：若在后方向左滚动，若在前方向右回滚。

由于所有图片均设置了浮动（float），因此当任意两张图片同时显示时，它们会因浮动特性紧密相邻。这样便无需额外处理图片的定位问题。

此外，这种方式仅需操作图片容器（即那个 ul），而无需操作单张图片，从而节省了系统资源。

我认为这种思路非常精妙，既简单大气又节约资源，因此我编写了 XScroll2.js 来记录这一效果，感觉相当不错。

有兴趣的朋友可以查看 XScroll2.js 的示例页面，该示例仿照了拍拍网首页的图片切换效果——因为其效果原理与上述思路一致。不过，不知道坚持读到文末的读者有多少呢……