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

先说一种最普遍的思路：

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

特点：

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

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

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

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

他的特点是：

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

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

复制代码 代码如下:

• 


• 


• 


• 

html结构，很普通；前面的定位跟最普遍的那个思路一样，都是所有图片均设置float:left。但JS里面有蹊跷：只设置当前图片为显示，其余图片隐藏，当要滚动时，显示出下一张图片，并判断下一张图片是在当前图片前面还是后面：在后面就往左滚，在前面就回滚。

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

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

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

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