简要

byfreeBanner是一个简易的js封装插件，使用原生js编写无需依赖其他的类库，致力于快速生成banner，目前版本0.10。

另外本插件不支持ie678浏览器，建议使用谷歌浏览器开发使用。

功能

  1. 数据绑定：根据输入的图片url多少来判定生成的banner的图片多少
  2. 自动轮播：可以设置自动轮播的速度
  3. 热点轮播：点击按钮跳转
  4. 轮播动画设置（待添加..）
  5. 支持ie678（待添加...）

使用

1. 在head中引用css

<link rel="stylesheet" href="https://halophoto.oss-cn-beijing.aliyuncs.com/pohot/byfreeBanner_1601112939758.css?x-oss-process=byfree">

2. 在body后面引用js文件

<script src="https://halophoto.oss-cn-beijing.aliyuncs.com/pohot/byfreeBanner_1601112945596.js?x-oss-process=byfree"></script>

3. 在要添加的banner的元素上添加id

这里的添加id的元素的宽度和高度会决定banner的宽度和高度
例如：

<div id="box" style="width: 1000px;height: 400px; margin: 0 auto;"></div>

4. 添加脚本片段，初始化插件

注意：这里的初始化脚本片段需要在核心js引用的下面从新书写
这里的arr代表一个数组，里面的元素为轮播图片的url，静态访问不可以在最前方加/，否则会引用失败。
在创建byfreeBanner对象时，
第一个参数为要添加banner元素的id也就是3步骤中设置的id
第二个参数为片段中上方创建的arr数组，也就是存储img的url的数组，插件会根据这个数组的长度动态生成banner
第三个参数为自动轮播的时间，单位为毫秒（注1000ms = 1s）

<script>
    var arr = [
        "images/01.jpg",
        "images/02.jpg",
        "images/03.jpg",
        "images/04.jpg",
        "images/04.jpg"
    ]
    new byfreeBanner(box, arr, 4000);
</script>

Q.E.D.

深至缄默，如云漂泊