Javascript 如何从正在更改的幻灯片中删除flash？

我有这个网站

https://acanhs.org/

但当幻灯片切换到另一张图片时，它会显示白色闪光。我怎样才能删除它

我的html：

var myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
对于（i=0；ix.length）{
myIndex=1
}
x[myIndex-1].style.display=“block”；
设置超时（旋转木马，5000）；
}

.container{
宽度：100%；
身高：100%；
溢出：隐藏；
}
迈斯利德斯先生{
显示：无
}
迈斯利德斯先生{
身高：100%；
最小高度：600px；
最大宽度：100%；
背景图像：var（--背景图像）；
背景尺寸：封面；
背景位置：中心；
}
.mySlides>.numbertext{
背景色：rgba（255、255、255、0.8）；
填充：0.5雷姆；
}
.w3为顶部设置动画{
位置：相对位置；
动画：animatetop 0.4s
}
@关键帧动画顶点{
从{
顶部：-300px；
不透明度：0
}
到{
排名：0；
不透明度：1
}
}
.w3为底部设置动画{
位置：相对位置；
动画：animatebottom 0.4s
}
@关键帧动画块{
从{
底部：-300px；
不透明度：0
}
到{
底部：0；
不透明度：1
}
}
.反应迅速{
宽度：100%；
高度：自动；
}

您好，可以从1而不是从0开始关键帧不透明度吗？ 它不能从不透明度0转换为1，在转换过程中显示闪光。 所以这里是更新的动画风格

.container{
    background-color:black;
  }
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:1} to{top:0;opacity:1}}

.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:1} to{bottom:0;opacity:1}}

---

你所说的“flash”只是你的背景，因为动画是不同步的。你知道我如何同步吗？我是网络开发新手，学习新东西我真的很兴奋尝试将js代码放在隐藏图像的上面通过背景为白色的方式查看图像，在过渡过程中仍然会出现空白。我不能让过渡更快，这样空白就不会出现吗？（对不起，我是一个JavaScript noob）若你们真的不想要白色闪光灯，为什么不把容器的背景设置成其他颜色呢？黑色的？然后没有上面的css闪存。这是我的拙见。：）这很聪明。谢谢，我会的，我已经更新了css。如果有帮助，请告诉我。顺便说一句，没有其他方法可以消除过渡期间的差距。请投票或检查它是否有助于您。谢谢