JavaScript 这种焦点图特效是怎么实现的？

dxcqcv · 2014年09月07日 · 最后由 hugeannex 回复于 2014年09月10日 · 2340 次阅读

首页的焦点图，无论点击下面的 1，2，3，4 那个数字，都是一张图片滑动出去，一张图片滑动经来，

不理解他是怎么实现的？我做的焦点图都是用 margin-left:-每张图片的宽度 px 这样，所以当点击最后一张的时候会划过所有的图片，比如 bilibili 这样http://www.bilibili.com/index.html

我想知道复旦这个怎么实现的，什么原理，或者给我关键词也好，非常感谢

saiga #1 2014年09月07日

b 站的是元素不隐藏，祖父容器 hidden，父容器相对位移。复旦那个是元素隐藏，每次滑动将当前元素设为负边距 100%，下一个元素设为 100% 逐渐减为 0 至于有什么插件就不清楚了，知道原理自己写起来也不费事

1 个赞

lyfi2003 #2 2014年09月08日

Foundation 官方推荐的相关插件：http://kenwheeler.github.io/slick/

vianvio #3 2014年09月09日

感觉这个不难吧？只用 2 个 imgholder，一个是当前展示，一个是即将进入的。点击数字的时候根据 index 从图片数组里获取图片地址，然后附给即将进入的 imgholder 应该就可以实现了

hugeannex #4 2014年09月10日

js 的一个常用效果

需要登录后方可回复, 如果你还没有账号请注册新账号