canvas-slider-v1
v1.0.0
Published
+ 本插件是基于canvas和面向对象封装的轮播图 + 具体使用方法 1. 页面创建一个显示轮播图元素， 必须设置宽度，高度可不设置，如果高度设置会以设置的高度为准，如果没有设置高度，会以图片比例设置高度 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp
Downloads
4
Maintainers
hufei_001Readme
使用说明
- 本插件是基于canvas和面向对象封装的轮播图
- 具体使用方法
- 页面创建一个显示轮播图元素， 必须设置宽度，高度可不设置，如果高度设置会以设置的高度为准，如果没有设置高度，会以图片比例设置高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } /* 宽度必须设置 高度可以不设置 */ .slider{ width: 800px; margin: 100px auto; } </style> </head> <body> <div class="slider"> </div> </body> </html>- 引入slider.js, 然后进行初始化
<script src="./slider.js"></script> <script> const slider = new Slider('.slider', { isAutoPlay: false, // 是否自动轮播 imgList: [], // 图片列表 dotColor: "red", // 点的颜色 dotWidth: 20, // 点的宽度 dotGap: 15, // 点与点之间的间距 dotLineWidth: 2, // 点的外层边框宽度 dotLineColor: "red", // 点边框的颜色 arrowLineWidth: 6, // 箭头的粗细 arrowWidth: 40, // 箭头的宽度 arrowHeight: 60, // 箭头的高度 arrowLineColor: "#fff", // 箭头的颜色 arrowGap: 10, // 箭头距离页面两侧的间距 arrowPadding: 10, // 箭头内部的间距 arrowBgColor: "rgba(0,0,0,0.5)", // 箭头的外层元素背景色 }) </script>