在pano.js——krpano接口封装里介绍了如何使用JavaScript来调用krpano常用接口，并对其进行扩展封装。这篇将扩展这个话题：如何 “摆脱” krpano语法来做全景应用。
pano.js的由来
首先krpano这款全景引擎的确非常的优秀，你只需要简单的几个步骤，就可以制作漂亮的全景应用，而且还支持二次开发，例如国内知名全景平台720云就是基于krpano开发的。
但是，它也不是没有缺点，自成体系的语法让人很头疼，因为它和其他脚本语法（不错，说的就是JavaScript）非常相似，对于新接触的程序员很是头疼，庞大的API文档也是酸爽，虽然krpano可以接受JavaScript语法，但是兼容性太差，高级语法（ES6+）不支持，action函数不支持回调，常用的变量定义（如数组）也是令人难以捉摸。
综上，使用krpano制作全景是快乐的，使用krpano语法开发是痛苦的。
krpano全景是运行在浏览器中的web应用，也就是说，全景开发应该属于前端开发范畴，既然属于前端，理应用JavaScript接手呀，但是，krpano的仅仅提供了四个接口，虽然这四个接口完全可以使用，但是使用起来很不友好。在此环境下，pano.js就诞生啦，pano.js是对常用krpano的接口扩展封装，并且使用友好，具体可以查看pano.js——krpano接口封装这篇文章。
实践
对于全景应用，编辑最多也是用户体验最多的就是所谓的皮肤（其实就是UI啦）。常规情况下，全景皮肤由两部分组层：底部菜单列表和右侧（一般在右侧）独立功能按钮。底部菜单列表一般包含常用功能按钮和场景切换菜单。
接下来，就利用pano.js来实现自定义场景切换菜单，也就是一级菜单的开发。
先来一张预览：
如何动态生成一级菜单呢？要想利用代码自动生成，必须要理解其中的原理。所谓一图胜千言，各位看官，请看下图，要仔细看哦，手绘的呢~~
下面就来详细讲解一下这个原理图，PS：菜单生成的方法有很多，其中原理可能也略有差异，还请各位同学自行斟酌。
根容器
所谓根容器，就是包含一级菜单所有内容的layer，type="container" 根容器需要设置宽度和高度,背景色等属性，这些都是可以自定义的，稍后再说明。
滚动层
当缩略图数量超过容器宽度时，就需要做超出滚动（这一层忘记在图中画出来了，请自行脑补），PS：krpano的滚动插件还是很好用，配置简单，而且还很流畅。
thumb块
也就是具体的缩略图层，这一层是独立的一个一个的小块，是滚动层的子元素，点击缩略图层会跳转到对应的场景（你也可以来完成其他的功能）。每一个thumb块包含四个部分：容器、图片、文字和激活层。容器是包含其他三项的，同时也保证子元素的位置，图中下半部分的内容（文字层也忘记画了.....）。文字层就是现实该场景的名称，激活层就是点击这个thumb时的响应。
其实结构并不复杂，但是其中也有难点，难点就在如何动态确定滚动层的宽度和缩略图层的位置。
仔细观察，还是可以发现规律的，各位同学可以根据图中的标注自行计算一下。
如何用代码实现
以上是简单的原理，下边就来说明如何利用pano.js库，用JavaScript来实现这个一级菜单。
我已经把这功能模块写好——layerscroll.js，下边就详细说一下代码吧。
首先在index.html底部引入pano.js和layerscroll.js。在此之前，必须要引入tour.js这个核心文件，毕竟这是基于krpano开发的库。一下代码内容均在layerscroll.js中。
全局参数配置项。这里包括根容器参数（container）、缩略图容器参数（thumbsets）和缩略图索引参数（thumbs）。
实例化。
在类layerScroll中继承了Pano。
根据之前的原理阐述，需要主动创建根容器、滚动层、缩略图层。
创建父层，根容器
创建层layer，利用pano.js的接口——createlayer便可以很轻松的完成。传入参数为JSON对象，包含层的名字name属性，以及设置层的相关属性list。可以看到，属性这是的参数主要来自SETTINGS.container字段，也就是第一步中提到全局配置中的参数。
创建滚动层
滚动层是根容器的子元素，所以要传入父元素的name，以及缩略图的数量nums，这里的滚动层的参数是由缩略图的数量和基本参数决定的，也就是动态计算。
创建缩略图层
缩略图层包含内容比较多，所以把每个功能拆分成函数，降低耦合。
其中包含创建缩略图父层、图片层、文字层和激活层。
创建缩略图父层
缩略图父层比较重要，因为它决定了图片层、文字层和激活层的位置属性，因为这三者都是缩略图父层的子元素，所以只要父层位置确定好，子元素就不需要确定位置了，而位置确定也是难点。
同样，缩略图父层的位置仍然由缩略图的数量和基本参数决定的，但是这里需要区分一下第一个元素的位置。
这里要注意图片层和文字层的点击事件的写法，因为点击缩略图时有可能会点击图片也有可能会点击文字，所以两者都要写明点击事件。
在全局参数配置中，thumbs参数为缩略图的参数配置，它有两种参数；①参数为scene字符串，则会根据各个scene的内容进行渲染，图片截取scene标签中的thumb的thumburl，文字截取title，这和自带的皮肤是一样的。②自定义数组，当想要自定义缩略图、文字以及跳转scene时，可以自定义。如下：
这里每一个子对象需要包含title，thumburl和scene三个参数。
以上便是layerscroll.js的核心内容了，更详细的内容可以产看源代码。
最后，就是去创建它。
这里需要注意，如果需要内容加载后就自动创建，需要延时设置。这里有一个函数，scrollAreaResize()，他的作用是重置滚动层的位置，当缩略图的数量小于跟容器的宽度时，我们希望它居中现实，当超出根容器宽度时，需要居左显示。在onresize中再次调用，就可以跟随窗口的变化而实时变化了。
以上便是利用JavaScript写一级菜单的过程。
总结
和使用krpano语法相比，layerscroll.js的写法更清晰，利于扩展。但是JavaScript并不能代替所有的krpano的功能，例如js无法主动创建除了layer/plugin和hotspot以外的其他元素，这样在js中就无法创建events的事件了，所以需要用到的全局事件还要在xml中老老实实写代码。
这只是利用pano.js写的第一个例子，往后还会继续 “折腾”，欢迎各位同学关注。
