轮播图：在一个模块或者说窗口，通过电脑上鼠标点击、手机上手指滑动后，可以看到多张图片。这些图片就都是轮播图，这个模块就叫做轮播模块。实现轮播可以有多种方法，利用supersilde插件和编写JS代码都可以，
JS
- 首先创建一个html文件，下图中我创建的是html5的，所以看起来很简单。
- 3
然后我们可以在html头部标题下添加css样式代码来控制div的显示效果。
- 4
接下来在body标签中添加js的事件onload，也就是加载该页面的时候，调用onload的值对应的方法，图中的话就是init()。
再为img添加一个id属性，这样我们可以通过getElementById("id值")来得到该元素标签。
- 5
然后通过<script>标签中，添加如下图代码，完成轮播的功能。其中
setInterval(code,time);//两个参数都是必须的，其中code是执行的方法或者代码串，time是时间间隔（以毫秒计，1000就是1秒，根据需要来调整）。
6
完成之后，通过浏览器去运行就可以看到效果，它会自动切换图片，也就是轮播图了。
supersilde插件可以让代码变得更加简洁一点，但是使用supersilde插件的时候一定要熟悉supersilde插件的全部参数，而大部分参数都很少碰到，最重要的还是要熟知如下参数
下面看个简单的例子：
轮播前
轮播后
代码也是如此的简洁：
而还有一种方法就是layui-carouselaed, 主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。
下面看个例子：简单的轮播图·：
代码：
在HTML的架构中，需要注意以下两项：
- 外层元素 class="layui-carousel" 用来标识为一个轮播容器
- 内层元素的属性 carousel-item 用来标识条目，而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。
轮播还有一个切换事件，轮播的每一次切换触发，回调函数一般都会返回一个object参数。