一个section是一页幻灯片。
如果你将多个 <section>放到另一个<section>的内部，它们将会以垂直幻灯片的方式显示。第一个垂直幻灯片是其它的 “root（根）”
怎么理解呢？ 可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。
For example:
其他具体内容请查询下节 参考 引用。
1、 reveal.js-一个专门用来做 HTML 演示文稿的框架
2、 HTML5幻灯片库reveal.js使用
3、 使用reveal.js制作一个酷炫的网页ppt
4、 Reveal.js：把你的 Markdown 文稿变成 PPT
新建一个文件夹dome,
在文件下新建一个文件夹img 放入5张名称为1,2,3,4,5 格式为“.jpg”的图片文件。
在新建一个dome.html 文件 内容如下：
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
#a1{
width: 600px
height: 500px
border: 10px silver solid
animation:backgroundImg 5s infinite
-webkit-animation:backgroundImg 5s infinite
}
@keyframes backgroundImg{
0%{background-color: #0000FF}
25%{background-color: #0099FF}
50%{background-color: #00FFFF}
75%{background-color: #99FFFF}
100%{background-color: #FFFFFF}
}
@-webkit-keyframes backgroundImg{
0%{background-color: #0000FF}
25%{background-color: #0099FF}
50%{background-color: #00FFFF}
75%{background-color: #99FFFF}
100%{background-color: #FFFF00}
}
#backImg{
width: 500px
height: 490px
/*border: 5px red solid*/
margin-left:45px
z-index: 100
background-size:100% 100%
}
a:hover{
background-color:#0000FF
border: 5px springgreen solid
width: 20px
}
a{
display: block
z-index:
width: 30px
height: 30px
text-align: center
line-height: 30px
color: beige
font-weight: 300
border-radius:50%
font-size: 2em
background-color:#0099FF
position: absolute
top: 255px
box-shadow: none
}
#right{
left:580px
}
span{
display: block
width: 50px
height: 10px
background-color: #99FFFF
float: right
margin-left: 20px
position: relative
bottom: 50px
right: 100px
}
#show{
width: 200px
height: 100px
border: 1px red solid
position: absolute
bottom: 230px
right: 150px
background-size:100% 100%
}
</style>
</head>
<body>
<div id="a1">
<a id="left"><</a>
<a id="right">></a>
<div id="backImg"></div>
<div id="foot"></div>
</div>
<script type="text/javascript">
var div=document.getElementById("a1")
var backImg=document.getElementById("backImg")
var a_left=document.getElementById("left")
var a_right=document.getElementById("right")
var i=0
function backImage(){
i++
backImg.style.backgroundImage="url(img/" +i+".jpg)"
setTimeout(backImage,7000)
if(i>=5){
i=0
}
}
backImage()
a_left.onclick=function(){
i--
if(i<=0||i>5){
i=5
}
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
a_right.onclick=function(){
i++
if(i<=0||i>5){
i=1
}
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
for (var j = 0j <3j++) {
var span=document.createElement("span")
span.id="span_"+j
div.appendChild(span)
span.onmouseover=function(){
show(event)
}
}
function show(e) {
backImg.style.opacity="0.5"
var span = e.target
var div = document.createElement("div")
div.id = "show"
span.parentNode.appendChild(div)
console.log(span.id)
if(span.id=="span_2"){
i-=1
console.log(i)
if(i<=0||i>5){
i=5
}
div.style.backgroundImage="url(img/" +i+".jpg)"
}else if(span.id=="span_1"){
div.style.backgroundImage="url(img/" +i+".jpg)"
}else if(span.id=="span_0"){
i+=1
if(i<=0||i>5){
i=1
}
div.style.backgroundImage="url(img/" +i+".jpg)"
}
span.onmouseout = function() {
backImg.style.opacity="initial"
this.parentNode.removeChild(div)
}
span.onclick=function(){
backImg.style.backgroundImage="url(img/" +i+".jpg)"
}
}
</script>
</body>
</html>
1，学习js分几个阶段，没入门，入门初学者，中级水平，高级水平，ppt水平。2，没入门的如何学习？
我当初是先学jquery，有css和html基础，有css基础看jq的语法很简单，就是选择符，jq的api懂高中英语就够了，猜也猜的出来意思，然后下载基本jq的chm手册，对着挨个看一遍。（这个挨个看一遍的意思就是一行一句的逐个看一遍，看不懂的别死扣，先看完再说）。
看完一遍之后，心中有数，哦，原来有个ajax函数可以访问网络资源，有个success可以写回调方法，超时怎么办？几个一起同时发怎么办？不管了，用到再说。哦，原来有个find函数可以查找dom节点，哦，原来有个serialize函数可以序列化表单值，哦，原来有个toggle函数可以做切换用，哦，有个fn可以挂着写插件用，哦，切换cls这样做就行了，哦，请求json数据这样配置参数就可以了。
做到了解，你就成功了，用到的时候知道jq能干什么，不能干什么，干什么的时候去看哪一章，再去仔细研究，做东西开始有点慢，做起来几个东西之后就手熟了。
同理，我学习yui2，kissy，mootools，nodejs，react，ng，甚至swift部分也是这样对着手册来的，反复几遍就可以了。
入门的意思就是概括一下，我知道有哪些api能干什么，具体怎么干，用的时候再说。
2，入门初学者。
我看完手册了，也写了几个小项目了（切换切换class，套几个jq插件，ajax取完数据又html放到指定位置了类似这种需求）。我感觉我可牛逼啦，终于会写交互js啦，感觉什么都不怕啦，其实就是刚入门而已。
我们来看看入门初学者怎么提升js编程技巧，个人经验，切勿照搬模仿，我们会使用框架工具库完成简单需求的同时，我们无法理解一些复杂功能的开发原理。比如一个简单的放大镜特效，一个裁切头像大小的功能，一个轮播组件，一个搜索智能提示，一个at圈人功能，甚至一个回到顶部的fixed按钮，或者输入框计数，表单验证组件，动态表格，长连接聊天功能，浮出层，移动端的swiper，动画函数，选择器，字符串模板，富文本编辑器？太多啦？一点也不多，我还没说全呢，几乎所有你在网页里见到的一些现成交互，其实有个学名，慢慢看，挨个写一遍，两遍，三遍，先不谈封装成组件，api是否优美，就说能不能写出来，刚入门的人一定say no。
说白了，经验的积累是前端开发非常重要的一条，有些东西你没写过你还真就是不会写，或者你知道怎么写，但是你没写过也别轻易说自己会，因为兼容问题，很多东西细节上你还是没有体会。所以，我第一次工作写一个头像裁切功能，我想了好多个夜晚，也没弄明白原理，查了好多文章，又写了许多demo，最后还是做了出来，但是会有一些极限情况下的bug？一个组件一个组件的撸，一遍又一遍的撸，是初学者最好的提升方法。
等你做到基本网页里任何一个功能看一眼就知道怎么写或者都亲自写过的时候（不是demo级别，是上线级别），你就已经不是初学者了，大概这个速度快也要1年左右时间，这也就是为什么一些功能招聘都要3年以上的原因了，经验包的积累不是看几本书就搞的定的。
3，中级水平。
你发现你在编写javascript功能时已经没什么好怕的东西了，也就是说，衡量一个需求时，你从来不会说no，而只是预估时间的时候，基本就已经达到中级水平了，这个时候你明确的知道自己在写的是什么，也能读懂别人写的是什么，而且拥有了一些自己平时积累所写得插件，组件，并封装的好好的，那么，就完美了么？你发现你遇到了瓶颈，不知道如何提高自己了，打开了知乎，可能问下了这个问题：《如何提高javascript编程高级技巧》
这个时候你需要往高级一步了，你可能熟练使用jq或者某一框架，基于某些框架二次开发了非常炫酷的插件组件，并且了解了设计模式，一些高大上的名词，业务需求无法满足你，自动化工具grunt和gulp用的妥妥的，总之，很多事情在你眼里自己无所不能，哎呀我操，为什么呢，我是不是凯瑞了全场？
这个时候，你需要的是开始思考，从最开头开始撸你的东西了，比如我们往往喜欢使用jq或者zepto，我们的插件往往是基于他们或者说我们的经验都是在某一个领域框架下实现的，回过头来看，这些东西真的好吗，他们是如何实现的？为什么要这样设计，一个超过5000行的抽象类怎么组织，设计模式你真的理解吗，js的奇淫技巧你会几样，有没有见过一些根本看不懂的js代码，那些大牛们到底在说什么呀，es6的api到底有多少个呀，那些新手都看得懂jq（真的懂？）,为毛自己写不出来？grunt到底是怎么运行的啊，v8的源码是什么样的啊，测试用例是什么鬼啊？
很多时候，我在读一个库的源码时，在看devDependencies的时候，意外又发现了数个不懂的东西，有时候见到一段代码会会心一笑，有时候又会大喊卧槽，从感觉自己什么都知道，到感觉自己什么都不知道，可能就是你突破瓶颈的时候了。
4，高级水平。
我们公司也有高级工程师的技术序列要求，我刚好评过，基本考察点都不在你如何实现一个技术细节了，而是考察你如何从0到1的这个过程，以及可能涉及到2，3，4的预判能力。还有就是在业界都在传一些东西很好很强大的时候，你已经可以把他转换为实际的生产力了，能发现一些好的东西里面不足的地方，并能自己改进，永远不满足，不崇拜大牛，因为自己就是大牛。说白了，你写的东西要能让很多人解决一些经常解决不了的问题，比如怎么能让你的系统更快，依赖更少，代码更小，开发起来更爽，新人如何更好的上手，api设计的美不美，实现的每一行代码都精雕细琢，review别人得东西总能提出自己的看法，总之，Legendary啦！
