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

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

特点：

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

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

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

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

他的特点是：

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

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

由于所有图片都设置了float,所以当任意两张图片显示出来的时候，他们会因为float的原因紧紧靠在一起，这样，就不用额外担心图片的定位问题了。

而且，这样一来，也只用操作图片容器（即那个ul)，而不用操作单张图片，节省系统资源。

我觉得这种思路很妙，简单大气又节约，所以我写了一个XScroll2.js，来记录这个效果，感觉还很不错哈。

有兴趣的朋友可以看XScroll2.js的示例页，仿的是拍拍网首页的图片切换——因为他的效果也是上面说的这种。不过不知道能坚持看到文末的同学有多少呢。。