V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
爱意满满的作品展示区。
rabbbit

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

  •  
  •   rabbbit · Feb 1, 2018 · 4217 views
    This topic created in 3019 days ago, the information mentioned may be changed or developed.
    • 原生 JavaScript 编写,无需其他第三方库
    • 5 种切换效果, 淡出 滚动 飞入 风琴页 碎块
    • 自适应,自动监控容器宽度变化(使用 onscroll 触发)
    • 兼容 ie9 及以上浏览器,ie10 及以上浏览器使用 css3 动画,ie9 使用 JavaScript 计算动画过渡.
    • 无缝滚动
    • 支持 HMTL 文本作为轮播内容

    demo1
    demo2
    项目地址

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

    13 replies    2018-02-02 21:15:46 +08:00
    fengyj
        1
    fengyj  
       Feb 1, 2018   ❤️ 1
    话说,你的"<"和">"是不是搞反方向。
    rabbbit
        2
    rabbbit  
    OP
       Feb 1, 2018
    @huiyifyj 确实是放反了,已修正...
    zicla
        3
    zicla  
       Feb 1, 2018   ❤️ 1
    效果还不错。几个小建议:1. 鼠标长按图片拖动时应该可以进行上下页的切换。2. 鼠标移到上下页指示器时应该是手型的。3.响应式目前不支持。3. 这么一个小小的 demo 为何还要请求一堆 js,还要使用 jsonp?
    rabbbit
        4
    rabbbit  
    OP
       Feb 1, 2018
    @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  
       Feb 1, 2018   ❤️ 1
    @rabbbit 响应式确实是 demo1,demo2 中的问题。不过你后面贴的这个链接响应时图片被压缩了,理想状态应该是宽度自适应设备,然后高度自动伸缩吧。jsonp 确实是 github 加上的,这个是我无知了。
    1762628386
        6
    1762628386  
       Feb 1, 2018   ❤️ 1
    牛逼了 但是有一点想问下 为什么你们都喜欢用 class data-{name}="{val}" 这种用属性的方式不是更好么 而且不会产生 css 冲突
    rabbbit
        7
    rabbbit  
    OP
       Feb 1, 2018
    @1762628386
    data-*比 class 更好是指哪里呢,可以举个例子吗?
    iextrastu
        8
    iextrastu  
       Feb 2, 2018   ❤️ 1
    说实话感觉壁纸还不错
    jiqing
        9
    jiqing  
       Feb 2, 2018   ❤️ 1
    不错不错,赏个 star
    yuqingm
        10
    yuqingm  
       Feb 2, 2018   ❤️ 1
    给你点个赞
    lengxiao
        11
    lengxiao  
       Feb 2, 2018   ❤️ 1
    这个赞!!!
    t2doo
        12
    t2doo  
       Feb 2, 2018   ❤️ 1
    立马放到首页试了试,不错不错
    rabbbit
        13
    rabbbit  
    OP
       Feb 2, 2018
    @extra888 示例里的图片是在这里下载的 https://unsplash.com/
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2761 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 43ms · UTC 15:38 · PVG 23:38 · LAX 08:38 · JFK 11:38
    ♥ Do have faith in what you're doing.