做一个html5 slide幻灯片 | 前端技术空间

在会议上分享东西，我们通常用ppt。而技术交流会则习惯用html5 slide幻灯片作演示。以下内容主要是总结制作html5 slide 幻灯片的要点：

1 . 每个section作为一个独立页，结合css3的translate3d和透明度进行变换。

2 . 通过箭头↑或者←控制向前翻页，箭头↓或者→控制向后翻页。并注意第一页和最后一页与箭头的情况。

3 . css定义三个状态：prev，cur，next。向后翻页，cur过渡到prev，next过渡到cur。向前翻页，prev过渡到cur，cur过渡到next。

4 . 每次翻页改变url的hash值，以确定当前页的位置。

5 . 注意优雅降级，低版本的浏览器不支持html5元素以及css3 3d（可通过层级z-index或者其他切换动画）。