carousel(轮播图) 渐变效果

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 2363 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

轮播图

Carousel

渐变

从无到有

6 条回复 • 2018-06-06 07:46:52 +08:00

kkll7766

2018-06-06 06:40:06 +08:00

比如 slick 的 fade 无法做到第一张图保持不变

lightening

2018-06-06 06:42:18 +08:00

CSS transition: opacity

rabbbit

2018-06-06 06:58:13 +08:00

之前练手写的轮播图.写的不咋地,全当个参考吧.
项目地址 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';

2018-06-06 07:44:54 +08:00 via iPhone

应该可以自己手动写样式覆盖，还不行的话最好换一个插件。

kkll7766

2018-06-06 07:45:57 +08:00

@rabbbit // 强制刷新
current.style.display = document.defaultView.getComputedStyle(current)['display'];
// 加入动画效果
current.style.transitionProperty = saveTransitionProperty || 'all';

kkll7766

2018-06-06 07:46:52 +08:00

@rabbbit 这操作 666 学习了非常感谢！