简要
byfreeBanner是一个简易的js封装插件,使用原生js编写无需依赖其他的类库,致力于快速生成banner,目前版本0.10。
另外本插件不支持ie678浏览器,建议使用谷歌浏览器开发使用。
功能
- 数据绑定:根据输入的图片url多少来判定生成的banner的图片多少
- 自动轮播:可以设置自动轮播的速度
- 热点轮播:点击按钮跳转
- 轮播动画设置(待添加..)
- 支持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.