carousel(轮播图) 渐变效果

V2EX = way to explore

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

For Existing Member Sign In

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 2883 days ago, the information mentioned may be changed or developed.

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

轮播图

Carousel

渐变

从无到有

6 replies • 2018-06-06 07:46:52 +08:00

kkll7766

Jun 6, 2018

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

lightening

Jun 6, 2018

CSS transition: opacity

rabbbit

Jun 6, 2018

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

Jun 6, 2018 via iPhone

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

kkll7766

Jun 6, 2018

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

kkll7766

Jun 6, 2018

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