徐向博 / Imin.

原生JS移动端轮播插件
作者:Imin 时间:2018-11-09 分类: 前端

加班到现在,先把代码贴出来,有时间再写文档。

代码地址:http://lib.xuxiangbo.com/js/imslide.js

还有个压缩版:http://lib.xuxiangbo.com/js/imslide.min.js

待续...

-----------------

2018.11.17 更新

严格意义上来说算不上一个插件,只能说是个封装的函数。

不依赖CSS文件,样式由JS控制,因为是项目中临时写的,所以暂时只支持移动端(touch) ,先来整理一下DOM结构:

<div class="imslide">
    <div class="imslide-wraper">
        <div class="imslide-item">item</div>
        <div class="imslide-item">item</div>
        <div class="imslide-item">item</div>
    </div>
    <div class="imslide-pointer"></div>
</div>

DMO:

imslide: 最外层的容器

imslide-wraper:轮播的区域

imslide-pointer:焦点

imslide-item: 轮播内容

参数:

loop:布尔值,是否支持循环播放

runAuto:布尔值,是否自动播放

runTime:数字,自动播放的时间间隔,默认3000毫秒 (设置该参数时,自动触发runAuto = true,可省略runAuto参数)

heigh:数字,轮播内容高度设置,默认200

point:对象,包含三个属性:

    size:数字,焦点的大小,默认为10(即焦点为宽高10px)

    color:字符串,焦点默认颜色,默认为 rgba(0,0,0,0.3)

    focus:字符串,焦点选中颜色,rgba(255,255,255,0.7)

调用示例:

imslide({
    loop: true,
    runAuto: true,
    runTime: 5000,
    height: 200,
    point: {
        size: 12,
        color: '#000',
        focus: '#FFF'
    }
})


本文标签: 轮播

外汇: 博主发的文章真的是太经典了,学习了 2019-04-02 09:22
网络竞价赚钱: 这么难的知识博主都归纳这么详细,厉害了 2019-03-30 09:12
捕鱼达人: 文章很好,已收藏 2019-03-27 09:29
k236: 支持博主 2019-03-27 09:28
自闭症: 来学习!感谢博主分享! 2018-12-20 20:37
天津网站建设: 感谢博主,学习了 2018-11-29 18:04
云南茶网: 博主这博客太漂亮了 2018-11-25 21:18
广安网站建设: 支持博主 2018-11-20 09:53
广安网站建设: 学习了 2018-11-15 14:52