javascript 另一种图片滚动切换效果思路_javascript技巧

先说一种最普遍的思路：

把图片们用ul之类的包起来，并设置float。然后设置这个ul本身为absolute定位，其父标签用relative定位。通过设置ul的left或top值，实现图片队列的滚动效果

特点：

只操作一个html元素（即上文的ul），对系统开销小；滚到头会回滚；从大序号滚动到小序号也会回滚；从最后序号滚动到第一个，会“咻”的一下把所有中间的图片也路过一次。

另一种思路就是我在XScroll.js里实现的思路，所有图片用绝对定位。具体看那篇文章吧。

XScroll.js完成后，我始终觉得他的系统消耗是个问题，因为他实现一个图片切换基本上都是同时操作两张图片。所以我想写一个精简版的，但又不想要我文首说那种最普通的。

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

他的特点是：

无论从哪个序号跳到哪个序号，都只滚动一个步长。比如从1到2，或从1跳到到3，都只滚动一个步长。即使中间有其他图片，也不会出现；当然，滚到头也会回滚，但回滚也是只有一个步长。

这个效果看起来很奇妙，我研究了一下他的html，发现实现方式比我的XScroll.js要简便的多。