Layui功能布局

开发工具与关键技术：VS+MVC
作者：茅凯翔
撰写时间：2019年6月4日

很多页面都会用到轮播是吧！轮播用于展示一些广告、图片之类的。轮播可以自动的播放图片，也可以自动循环播放着里面的图片，在一些官网的主页面都会有轮播效果，用于展示这个网页新推出的东西，起到很好的宣传效果。通常的轮播都是通过js实现的，现在我来介绍一个快捷的方式（来自Layui的插件）。之前我就简单的介绍过Layui现在我来介绍Layui的轮播插件。以下就是整体的轮播，我这只是695×240px（像素），比较小，你用了的话，大小随你处置。轮播三个常见的功能分别是图片、箭头和指示器。

首先把Layui的css样式拉出来，因为人家都已经把css的样式封装起来了，我们只要拉出来就好了。外层的div元素的类（class=“layui-carousel”）是用来标识为一个轮播容器的，所以不可更改，id的就可以你自己给了。内层的div元素的（carousel-item）是用来标识条目的，也就是后面的每个div元素。然后后面的每一个图片都用div包裹着，若你想图片不仅可以观看，也可以供用户使用，你可以给每个图片加a标签跳转到别的页面去，详细的在下图。但你最好给图片加固定的宽度和高度。然后把你要展示的图片拉进你的项目里，建一个文档，专门放图片的，然后用src来获取图片。

再把Layui的js样式给拉出来，然后开始建造实例。Layui获取函数，声明一下carousel等于layui的carousel。然后通过carousel.render()来对轮播设置基础参数，或者可以通过carousel.set()来设定全局基础参数。第一个肯定是elem，它是容器选择器，就是选择到上面的外层div元素的id；给轮播容器设置固定的高度与宽度；anim是轮播的切换动画方式，它有三个值：（default为左右切换，updown为上下切换，fade为渐隐渐显切换）默认值为default；autoplay指的是是否自动切换，默认值为true；arrow指的是切换箭头默认显示状态，也有三个可选值：（hover为悬停显示，指的是当你的鼠标移动到轮播上面来时，它就显示出来了，当你的鼠标离开轮播面时，它就隐藏起来。Always为始终显示，none为始终不显示）默认值为hover。Indicator指的是指示器的位置，有三个可选值：（inside为容器的内部，outside为容器的外部，none为不显示）默认值为inside。Trigger为指示器的触发事件，默认值为click，是不能更改的。

剩下还是几个是不经常用的，我全部列出来，或许你们会用到：（full为是否全屏轮播，默认值为false；interval为自动切换的时间间隔，单位是毫秒，不能低于800，默认值为3000；index为初始开始的条目索引，默认值为0）好像就这几个了，我还以为还有好多的。