简介
buno 是一个轻量级的基于 HTML5 的 Web 轮播插件，用于在网页上展示图片、文字或者视频等多媒体内容。本文将详细介绍如何使用 buno 创建轮播图，并给出示例代码。
安装
在使用 buno 之前，你需要将其安装到你的项目中。使用 npm 命令进行安装：
npm install buno --save
使用
在安装 buno 之后，你可以在你的项目中引入它，然后使用它提供的 API 创建轮播图。
基本用法
在 HTML 中添加一个容器用于显示轮播图，然后引入 buno.min.css 和 buno.min.js，如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
----- ---------------- -------------------------------------------
-------
------
---- --------- -------------------
------- --------------------------------------------------
--------
--- ---- - --- ------------------------------------- -
------- ----------------------- ---------------------- ----------------------
---
---------
-------
-------上述代码中，我们创建了一个 ID 为 buno 的容器，然后在脚本中使用 Buno 构造函数创建了一个轮播图，并且将其绑定到 buno 容器上。默认情况下，buno 将会在轮播图中展示一组图片，这些图片的路径由 images 属性指定。
属性
Buno 构造函数接受一个包含属性的 JavaScript 对象作为参数，这些属性用于定制轮播图。
var buno = new Buno(container, options);
以下是 Buno 构造函数中允许的属性：
- images：指定轮播图中需要展示的图片组，如下：
images: ['static/images/1.jpg', 'static/images/2.jpg', 'static/images/3.jpg']
- duration：指定轮播图的滑动时间，单位为毫秒，默认为 5000：
duration: 3000
- direction：指定轮播图的滑动方向，取值为 left 或 right，默认为 left：
direction: 'right'
- autoPlay：指定轮播图是否自动播放，取值为 true 或 false，默认为 true：
autoPlay: false
- showCover：指定轮播图是否展示遮盖层，取值为 true 或 false，默认为 true：
showCover: false
- showPagination：指定轮播图是否展示分页器，取值为 true 或 false，默认为 true：
showPagination: false
方法
Buno 实例提供了一些方法，用于控制轮播图的行为。
- prev：显示上一张轮播图：
buno.prev();
- next：显示下一张轮播图：
buno.next();
- slideTo：滑动到指定的轮播图索引，参数为要滑动到的索引值，如下：
buno.slideTo(index);
- play：开始自动播放：
buno.play();
- pause：暂停自动播放：
buno.pause();
示例代码
以下是一个使用 buno 创建轮播图的完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------- ------------
----- ---------------- -------------------------------------------
-------
----- -
------ ------
------- ------
------- - -----
-
--------
-------
------
---- --------- -------------------
------- --------------------------------------------------
--------
--- ---- - --- ------------------------------------- -
------- ----------------------- ---------------------- -----------------------
--------- -----
---------- -------
--------- -----
---------- -----
--------------- ----
---
---------
-------
-------使用该示例代码，你可以创建一个包含了多张图片、自动轮播、遮盖层和分页器等功能的轮播图。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c8eccdc64669dde562d