Javascript 如何使文本和图像淡入淡出为SlideShow？

我正在尝试创建一个幻灯片放映，我想在图像中添加一个淡入淡出的文本。我希望文本与相关图像一起淡入淡出。文本和图像正在显示，但问题是它们不是以幻灯片放映的形式显示。我已经为此工作了3天，我无法找出它不起作用的原因。如果你可以帮我，你是我的一天，我给出了以下代码：

W3.CSS
正文，html{
文本对齐：居中；
字体大小：90px；
字体系列：Poiret One；
身高：100%；
颜色：黑色；
溢出：隐藏；
颜色：黑色；
}
.信{
位置：相对位置；
顶部：-webkit计算（50%-60px）；
顶部：calc（50%-60px）；
文本阴影：0px 0px 3px黑色；
}
.信：第n个孩子（1）{
-webkit动画：淡入无限200毫秒；
动画：淡入200毫秒；
}
.信：第n个孩子（2）{
-webkit动画：褪色4s无限400ms；
动画：400毫秒；
}
.信：第n个孩子（3）{
-webkit动画：褪色4s无限600ms；
动画：600毫秒；
}
.信：第n个孩子（4）{
-webkit动画：褪色4s无限800毫秒；
动画：800毫秒；
}
.信：第n个孩子（5）{
-webkit动画：衰减4s无限1000ms；
动画：1000毫秒；
}
.信：第n个孩子（6）{
-webkit动画：淡入1200毫秒；
动画：淡入1200毫秒；
}
.信：第n个孩子（7）{
-webkit动画：淡入4s无限1400ms；
动画：淡入4s无限1400ms；
}
@-webkit关键帧淡入淡出{
50% {
不透明度：0.02；
}
}
@关键帧淡入淡出{
50% {
不透明度：0.02；
}
}
T
E
s
T
T
E
s
s
2.

好的，所以我不能用CSS来做这件事，因为我对CSS动画很糟糕，所以我决定用jQuery来做

$（“div”）.hide（）；
空白（）；
函数blank（）{
$（“.1”）.fadeIn（400）、delay（2000）、fadeOut（400）；
美元（“.2”）。延迟（2800）。淡出（400）。延迟（2000）。淡出（400）；
美元（“.3”）。延迟（5600）。淡出（400）。延迟（2000）。淡出（400）；
美元（“.4”）。延迟（8400）。衰减（400）。延迟（2000）。衰减（400）；
setTimeout（空白，11200）；
}

.div{
高度：100px；
宽度：200px；
左边距：250像素；
边缘顶部：150px；
边框：3倍纯黑；
}
#钮扣{
高度：50px；
宽度：50px；
边框：3倍纯黑；
边缘顶部：50px；
左边距：50像素；
}

Lorem Ipsum dolor坐在那里。
这是我最喜欢的名字。
荣耀中的圣洁。
Ubi Caritas et amor，Christus。

您希望先显示Test1，然后显示Test2吗？是的，就像幻灯片一样。您可以向我们展示一个您尝试复制的幻灯片示例吗？出于某种原因，我不认为你想做这样的幻灯片：@MichaelSorensen谢谢你花时间给我写信。我正试图创造这样的东西，但我想让我的下一个成为它的旁边，淡入淡出谢谢你花时间回答我的问题。你做了什么很酷