carousel(轮播图) 渐变效果

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

CSS transition: opacity

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

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

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

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