V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
kkll7766
V2EX  ›  CSS

carousel(轮播图) 渐变效果

  •  
  •   kkll7766 · 2018-06-06 06:27:43 +08:00 · 3330 次点击
    这是一个创建于 2122 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请问如何实现 点击事件之后 前一张图不变 后一张图从无到有进行渐变 从而覆盖前一张图

    6 条回复    2018-06-06 07:46:52 +08:00
    kkll7766
        1
    kkll7766  
    OP
       2018-06-06 06:40:06 +08:00
    比如 slick 的 fade 无法做到第一张图保持不变
    lightening
        2
    lightening  
       2018-06-06 06:42:18 +08:00
    CSS transition: opacity
    rabbbit
        3
    rabbbit  
       2018-06-06 06:58:13 +08:00   ❤️ 1
    之前练手写的轮播图.写的不咋地,全当个参考吧.
    项目地址 https://github.com/Aaron-Bird/bamboo
    渐变效果 http://htmlpreview.github.io/?https://github.com/Aaron-Bird/bamboo/blob/master/demo/animation-fade.html

    总之就是改变图层的 z-index,然后执行 CSS 动画
    部分代码逻辑
    if (index === -1) {
    // 跳转到最后一张
    index = this.slideList.length - 1;
    } else if (index === this.slideList.length) {
    // 跳转到第一张
    index = 0;
    }
    // 隐藏所有图片,重置 z-index 为 0
    for (var i = 0; i < this.slideList.length; i++) {
    this.slideList[i].style.zIndex = '0';
    this.slideList[i].style.visibility = 'hidden';
    }
    // 移除动画效果
    var saveTransitionProperty = getComputedStyle(current, null).getPropertyValue('transition-property');
    current.style.transitionProperty = 'none';
    // 改变图片图层顺序
    previous.style.zIndex = '1';
    current.style.zIndex = '2';
    // 隐藏上面的图片
    current.style.opacity = '0';
    // 显示图片
    current.style.visibility = 'visible';
    previous.style.visibility = 'visible';
    // 强制刷新
    current.style.display = document.defaultView.getComputedStyle(current)['display'];
    // 加入动画效果
    current.style.transitionProperty = saveTransitionProperty || 'all';
    // 播放动画
    current.style.opacity = '1';
    o0
        4
    o0  
       2018-06-06 07:44:54 +08:00 via iPhone
    应该可以自己手动写样式覆盖,还不行的话最好换一个插件。
    kkll7766
        5
    kkll7766  
    OP
       2018-06-06 07:45:57 +08:00
    @rabbbit // 强制刷新
    current.style.display = document.defaultView.getComputedStyle(current)['display'];
    // 加入动画效果
    current.style.transitionProperty = saveTransitionProperty || 'all';
    kkll7766
        6
    kkll7766  
    OP
       2018-06-06 07:46:52 +08:00
    @rabbbit 这操作 666 学习了 非常感谢!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3072 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 14:36 · PVG 22:36 · LAX 07:36 · JFK 10:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.