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