面向对象之简易轮播图的封装

156 阅读1分钟

面向对象练习

基于se6语法,用class类去封装一个能够复用的简易轮播图

    const carousel = new myCarousel(
            //dom元素
            htmlElement,
            // 图片地址
            [
                'https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF',
                'https://t7.baidu.com/it/u=825057118,3516313570&fm=193&f=GIF',
                'https://t7.baidu.com/it/u=3435942975,1552946865&fm=193&f=GIF',
                'https://t7.baidu.com/it/u=3569419905,626536365&fm=193&f=GIF',
                'https://t7.baidu.com/it/u=3779234486,1094031034&fm=193&f=GIF',
            ],
            // 轮播宽高
            {
                width: '400px',
                height: '300px'
            },
            // 播一张图的时长
            {
                duration:1000,
                interval:500
            })

实现将图片地址和一些轮播图配置传入我们封好的class类中,能够生成对应的轮播图