Html 在最后3张图片上粘贴简单CSS幻灯片

我试着为某人创建一个非常简单的自动滚动图像库，虽然它确实起作用，但在第一次循环后，它只在最后3张图像中旋转，我不知道为什么。任何帮助都将不胜感激

*注意：我试图实现此幻灯片的系统使用了网页设计的模板主题，因此我无法访问/编辑/etc任何外部.css文件。几乎所有东西都必须内联构建

@关键帧淡入淡出{
0% {
不透明度：0；
}
11.11% {
不透明度：1；
}
33.33% {
不透明度：1；
}
44.44% {
不透明度：0；
}
100% {
不透明度：0；
}
}
.projectslideshow{
位置：相对位置；
垫底：56.25%；
身高：0；
溢出：隐藏；
最大宽度：100%；
}
.projectslideshow img{
位置：绝对位置；
左：0；
右：0；
不透明度：0；
动画名称：淡入淡出；
动画持续时间：9秒；
动画迭代次数：无限；
}
.projectslideshow图像：第n个孩子（1）{
动画延迟：0s；
}
.projectslideshow图像：第n个孩子（2）{
动画延迟：3s；
}
.projectslideshow图像：第n个孩子（3）{
动画延迟：6秒；
}
.projectslideshow图像：第n个孩子（4）{
动画延迟：9秒；
}
.projectslideshow图像：第n个孩子（5）{
动画延迟：12秒；
}
.projectslideshow图像：第n个孩子（6）{
动画延迟：15秒；
}
.projectslideshow图像：第n个孩子（7）{
动画延迟：18秒；
}
.projectslideshow图像：第n个孩子（8）{
动画延迟：21秒；
}
.projectslideshow图像：第n个孩子（9）{
动画延迟：24秒；
}
.projectslideshow图像：第n个孩子（10）{
动画延迟：27秒；
}
.projectslideshow图像：第n个孩子（11）{
动画延迟：30秒；
}
.projectslideshow图像：第n个孩子（12）{
动画延迟：33秒；
}

您能试试这个吗？谢谢您的更新。不幸的是，我无法使用上面提供的代码——我需要使此结构尽可能简单，因此理想情况下，只需对提供的代码进行调整即可。您能尝试一下吗？感谢迄今为止的更新。不幸的是，我无法使用上面提供的代码——我需要使此结构尽可能简单，因此理想情况下，只需调整提供的代码即可。