Javascript仿拍拍网首页图片切换效果

今天打开很久没上的拍拍网,出于职业本能稍稍看了下他的首页图片切换效果,发现跟我最近完成的XScroll2.js实现的效果非常相近,于是打算用XScroll2.js写一份效果相仿的代码。

首先说说拍拍网这个首页图片切换效果的特点:

  1. 单步长滚动。比如从第1张图片滚动到第4张,或从第3张回滚到第1张,都只滚动一个步长(虽然他们间隔了几个步长)
  2. 鼠标经过页码触发滚动
  3. 触发有延迟,并不是移动到对应页码马上就滚动了


也许最近流行这个效果,我前几天写的XScroll2.js也是用来制作这种效果的javascript类。所以要实现他很简单,只是改下CSS外观即可。

仿拍拍网首页图片切换示例页 Github地址

html+CSS请参考示例页。写好html及CSS后,只要引入XScroll2.js,再只写一句javascript代码即可。

1
2
3
4
<script src="XScroll2.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
var paipai = XScroll2('idSlider4',{direct:1,how:1,pager:'taobaopage'});
// ]]></script>

你甚至可以用这样的句子声明N个图片切换效果,XScroll2.js是经过封装,可重用的。

当然,XScroll2.js的切换效果较少,除了滚动效果,就只有一个淡入淡出效果了。因为他是他前辈XScroll.js的精简版,特效没那么多。

5 评论

  1. 发现你写的脚本有个问题,不知道算不算bug,包括你这个和之前的前辈,就是当你在鼠标从一个页码移到另一个页码上还没完成滚动你又把鼠标移回来,这样之前那个图片会先一闪现,然后再消失从头滚起

发表评论

电子邮件地址不会被公开。