利用layui组件实现简单的轮播效果

利用layui组件实现简单的轮播效果

开发工具与关键技术：VS2015，layui，JS
作者：易金亮
撰写时间：2019.04.09

说起轮播，我相信大家并不陌生，我们可以通过很多种方式实现轮播效果，下面我就来说一下如何利用layui组件实现简单的轮播效果，在使用layui的时候，我们需要先把她的一些插件引入到项目中，如下图所示：

把上图所示的两个插件引入到项目中之后，接下来就是敲代码了，要实现轮播效果，首先得有一个存放轮播图片的容器，然后往这个容器中添加图片，其实现代码如下图所示：

如上截图所示，在使用layui组件时，我们给外层元素一个类“class=“layui-carousel””来标识这是一个轮播容器，给内层元素一个属性“carousel-item”来标识条目，然后再在里面添加几张图片，这样一个轮播盒子就完成了，接下来就该完成如下图所示的操作了：

如上截图所示，我们先加载和初始化模块，然后通过核心方法：carousel.render(options) 来对轮播设置基础参数，具体参数如上截图所示，当然，这只是layui组件中的部分基础参数，还有很多参数我就没有一一设置了，具体的请参考layui离线手册。通过以上代码，我们就可以实现如下图所示的轮播效果了：


当然，轮播盒子中的条目部分不光光是只能存放图片，它可以是任何内容，比如说我在条目部分再添加一个div，里面放一个p标签，p标签里面加入文本“未完待续！”，然后给它设置一些样式，就能实现如下图所示的效果了：

当轮播跳转到最后一张图片时，就会出现如上图所示的提示。