欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2023-12-24 22:33:51
...
先说一种最普遍的思路:

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

特点:

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

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

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

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

他的特点是:

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

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


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

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

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

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



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

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

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

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

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

上一篇:

下一篇: