V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
rabbbit
V2EX  ›  分享创造

原生 Javascript 轮播图插件,支持多种动画效果,兼容 ie9 及以上浏览器

  •  
  •   rabbbit · 2018-02-01 20:19:23 +08:00 · 3788 次点击
    这是一个创建于 2522 天前的主题,其中的信息可能已经有所发展或是发生改变。
    • 原生 JavaScript 编写,无需其他第三方库
    • 5 种切换效果, 淡出 滚动 飞入 风琴页 碎块
    • 自适应,自动监控容器宽度变化(使用 onscroll 触发)
    • 兼容 ie9 及以上浏览器,ie10 及以上浏览器使用 css3 动画,ie9 使用 JavaScript 计算动画过渡.
    • 无缝滚动
    • 支持 HMTL 文本作为轮播内容

    demo1
    demo2
    项目地址

    如果有什么需求 /建议 /bug,欢迎在项目下留言.

    13 条回复    2018-02-02 21:15:46 +08:00
    huiyifyj
        1
    huiyifyj  
       2018-02-01 20:25:16 +08:00   ❤️ 1
    话说,你的"<"和">"是不是搞反方向。
    rabbbit
        2
    rabbbit  
    OP
       2018-02-01 20:47:07 +08:00
    @huiyifyj 确实是放反了,已修正...
    zicla
        3
    zicla  
       2018-02-01 21:09:37 +08:00   ❤️ 1
    效果还不错。几个小建议:1. 鼠标长按图片拖动时应该可以进行上下页的切换。2. 鼠标移到上下页指示器时应该是手型的。3.响应式目前不支持。3. 这么一个小小的 demo 为何还要请求一堆 js,还要使用 jsonp?
    rabbbit
        4
    rabbbit  
    OP
       2018-02-01 21:48:11 +08:00
    @zicla 感谢分享建议
    请问'响应式目前不支持'是指没有看到效果吗?
    上边的 demo1 和 demo2 的尺寸是写死的,自适应的效果可以看下这个
    http://htmlpreview.github.io/?https://github.com/Aaron-Bird/bamboo/blob/master/test/div-response.html

    还有'请求 jsonp'是指这些吗?

    这个是 Github 自动加的,原 demo 代码在这里,下载下来打开即可
    https://github.com/Aaron-Bird/bamboo/tree/master/test
    https://github.com/Aaron-Bird/bamboo/tree/master/demo
    zicla
        5
    zicla  
       2018-02-01 23:03:28 +08:00   ❤️ 1
    @rabbbit 响应式确实是 demo1,demo2 中的问题。不过你后面贴的这个链接响应时图片被压缩了,理想状态应该是宽度自适应设备,然后高度自动伸缩吧。jsonp 确实是 github 加上的,这个是我无知了。
    1762628386
        6
    1762628386  
       2018-02-01 23:20:15 +08:00   ❤️ 1
    牛逼了 但是有一点想问下 为什么你们都喜欢用 class data-{name}="{val}" 这种用属性的方式不是更好么 而且不会产生 css 冲突
    rabbbit
        7
    rabbbit  
    OP
       2018-02-01 23:55:28 +08:00
    @1762628386
    data-*比 class 更好是指哪里呢,可以举个例子吗?
    extra888
        8
    extra888  
       2018-02-02 09:11:46 +08:00   ❤️ 1
    说实话感觉壁纸还不错
    jiqing
        9
    jiqing  
       2018-02-02 10:04:41 +08:00   ❤️ 1
    不错不错,赏个 star
    yuqingm
        10
    yuqingm  
       2018-02-02 12:29:37 +08:00   ❤️ 1
    给你点个赞
    lengxiao
        11
    lengxiao  
       2018-02-02 13:50:16 +08:00   ❤️ 1
    这个赞!!!
    t2doo
        12
    t2doo  
       2018-02-02 15:21:48 +08:00   ❤️ 1
    立马放到首页试了试,不错不错
    rabbbit
        13
    rabbbit  
    OP
       2018-02-02 21:15:46 +08:00
    @extra888 示例里的图片是在这里下载的 https://unsplash.com/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   950 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 22:50 · PVG 06:50 · LAX 14:50 · JFK 17:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.