您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

凡客诚品带滚动条图片展示特效

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   如果现在比较专业的商城,估计凡客算是其中之一了,像当当及京东都变得啥都有了。看到凡客那么多照片,我就在想一件事,究竟得请多少人去拍照片,整理照片,还要有多少模特,不愧是大公司。今天我们进入凡客的丝袜频道(http://stockings.vancl.com/),相信许多男生喜欢这里。在这里,我们可以看到许多长腿美女。当我们把页面拉到最下面时(这个过程浏览器有点卡,估计是加载的东西太多了。。),我们可以看到凡客一个很有特色的图片展示特效:

凡客诚品带滚动条图片展示特效 三联

  细心的朋友估计会注意到下面的滚动条,以前我们做过许多带左右控制箭头的图片展示特效,但像凡客这样下面带上滚动条来控制的算是少见了,至少目前我只在凡客看过。那么,问题来了,那个滚动条如何实现?我们可以通过JQUERY实现滚动条的样式美化,但将它跟控制箭头及图片联系在一起,算是第一次。凡客的代码并没有开源,我们只能是自己实现,我们的代码如下:

/

  其实,我们并没有采用滚动条,只是将它的样子做成了滚动条。用户在使用这个代码的时候,必须注意:var __INFO__={total:10,skinid:0}这两个是必须的,total会决定显示的个数,滚动条的大小跟total的数量有关,滚动的长度跟total也是相关的。以下是我制作的效果截图:

/

  图片的数量越多,滚动条也会越来小,这个有点神奇。。。