苹果首页轮播案例实现

好文  2851

magiczhang 2017-02-27

好久没更新了，昨天朱同学说苹果官网的新轮播不错，还说他们公司的前端觉得要花3天才能做出来。我说我一天就行，他不服，没办法，今天花了一下午做了一下（没使用任何js库）。完成了一个小demo，轮播还有些bug要修改，因为是通过修改transform的translate3d属性来实现轮播的，跟之前修改left属性不太一样，无限轮播的实现方法也需要改变，目前还在思考，但是案例已经做出来，放到github上，地址

http://www.zhangzirui.com/applecom-banner/

轮播的实现谷歌一下能搜出好多个来，有使用库的有原生的，看需求，之前在公司PC端轮播使用jq手写，移动web上就使用swiper，强大、好用。

样式上，也就是css主要给几个元素设置了transition,使过度平滑，css3里强大的动画属性使得以前用js写的特效现在可以放心简洁的使用css来实现，当然，要考虑兼容。js更多的是做控制的作用。

-moz-transition: transform 1.5s;
/* Firefox 4 */
-webkit-transition: transform 1.5s;
/* Safari and Chrome */
-o-transition: transform 1.5s;
/* Opera */

js代码里写了3个计时器，用来实现图片的轮播，圆点的过度动画（dash），还有就是一个200ms运行一次的监测body.clientWidth的计时器。

代码都很简单，这里就不贴了。有兴趣的同学可以去我的github上看：

https://github.com/ZZR-china/applecom-banner

有个收获就是谷歌到了一个很方便的替换class name的方法