Canvas-slider-v1 NPM

使用说明

本插件是基于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>

canvas轮播图 canvas无缝轮播图 canvas slider canvas swiper

@everything-registry/sub-chunk-1291

1.0.0

9 months ago