使用Layui插件创建轮播

轮播是页面中最为常见的一种功能，有文字轮播，也有图片轮播。使用layui插件可以提高代码效率，而且简洁，代码量少

首先得引入layui的js和css插件

<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />

为layui的css样式

<script src="~/Plugins/layui/layui.js"></script>

为layui的js插件

这是第一步，也是最重要的一步

Html部分：

然后则是Html代码的固定格式：

    <div carousel-item>

        <div>内容1</div>

        <div>内容2</div>

        <div>内容3</div>

        <div>内容4</div>

        <div>内容5</div>

    </div>

其中条目1可以为img标签，而carousel-itemw为layui轮播唯一格式，注意，它不是一个class的名称，而是一个属性，和class一样都是一个属性，而layui-carousel是这个轮播的样式，也是唯一的，注意不要忘记引用layui的css样式

其html代码，比jquery的轮播插件要简洁得多，并没有使用ul li，而直接使用div，并且功能按钮都是自动生成，不用在html代码中写样式

以上为Html部分

而js部分为：

为加载layui，carousel为layui中的轮播插件

而其中的常用的元素为：

elem为指向容器选择器，如：elem: ‘#id’

width为设定轮播容器宽度，支持像素和百分比，默认值为600px

height为设定轮播容器高度，支持像素和百分比,默认值为280px

arrow为 切换箭头默认显示状态，可选值为：

hover（悬停显示）

always（始终显示）

none（始终不显示）

anim为轮播切换动画方式，可选值为：

default（左右切换）

updown（上下切换）

fade（渐隐渐显切换）

autoplay为是否开启自动切换，默认为true

interval为自动切换的时间间隔，单位：ms（毫秒），不能低于800

注意：js代码中的轮播的属性要使用逗号（，）分开

这样就使用layui完成了一个简洁的轮播，代码量大大减少了，所以是不是很方便