轮播图生成插件

轮播图生成插件

简要

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>

Copyright: 采用 知识共享署名4.0 国际许可协议进行许可

Links: https://www.byfree.top/archives/banner