好久没更新了,昨天朱同学说苹果官网的新轮播不错,还说他们公司的前端觉得要花3天才能做出来。我说我一天就行,他不服,没办法,今天花了一下午做了一下(没使用任何js库)。完成了一个小demo,轮播还有些bug要修改,因为是通过修改transform的translate3d属性来实现轮播的,跟之前修改left属性不太一样,无限轮播的实现方法也需要改变,目前还在思考,但是案例已经做出来,放到github上,地址
http://www.zhangzirui.com/appleBannerdemo/
轮播的实现谷歌一下能搜出好多个来,有使用库的有原生的,看需求,之前在公司PC端轮播使用jq手写,移动web上就使用swiper,强大、好用。
样式上,也就是css主要给几个元素设置了transition,使过度平滑,css3里强大的动画属性使得以前用js写的特效现在可以放心简洁的使用css来实现,当然,要考虑兼容。js更多的是做控制的作用。
js代码里写了3个计时器,用来实现图片的轮播,圆点的过度动画(dash),还有就是一个200ms运行一次的监测body.clientWidth的计时器。
代码都很简单,这里就不贴了。有兴趣的同学可以去我的github上看:
https://github.com/ZZR-china/appleBannerdemo/blob/master/js/banner.js
有个收获就是谷歌到了一个很方便的替换class name的方法
|
|
以上。