Javascript：网站标题幻灯片淡入效果

由于这是一个相当长的问题，请提前感谢那些费心阅读它的人！我正在做一个个人博客网站项目，在索引页面中，我想实现一个幻灯片标题（包含背景图片、标题和一个将用户重定向到实际psot的按钮），以动态显示特色博客文章。我还希望在标题转换为另一个标题时使用淡入效果。我的标题html如下所示：

var slideIndex=0；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“标题幻灯片”）；
对于（i=0；ix.length）{
slideIndex=1；
}
x[slideIndex-1].style.opacity=1；
x[slideIndex-1].style.display=“block”；
设置超时（旋转木马，3000）；
}

.header-1{
背景图像：线性梯度（rgba（0,0,0,0.29），#000），url（背景图像#1）；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
高度：100vh；
}
.标题-2{
背景图像：线性梯度（rgba（0,0,0,0.29），#000），url（背景图像#2）；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
高度：100vh；
}
.标题-3{
背景图像：线性梯度（rgba（0,0,0,0.29），#000），url（背景图像#3）；
背景尺寸：封面；
背景位置：中心；
背景附件：固定；
高度：100vh；
}
.标题样式{
显示：无；
过渡：不透明度。5s缓解；
}

第1条








第2条








第3条

使用css关键帧动画：

#标题{
动画：淡出无限；
}
@关键帧淡入淡出{
0% {
不透明度：.1
}
100% {
不透明度：1
}
}

---

谢谢！是的，这解决了问题，只要js的时间间隔大于CSS的时间间隔，就会产生非常好的淡入效果。