如何在使用javascript或jQuery更改背景图像时添加淡入淡出

我有四个不同背景图像的div。我试图让演员们每2秒随机选择背景图像，但一次只有一个演员

在寻找解决方案的过程中，我在他人的帮助下编写了这个普通javascript，但我遇到了以下问题：

背景图像的变化非常突然。我想有一个淡出->淡入效果时发生的变化。 我想防止这种情况，它可以选择一个背景图像，这是已经在那一刻由一个div使用。 我想将这段代码转换为jQuery，但我真的被这项任务困住了。 这是我到目前为止的代码，非常感谢您的帮助

变量URL=[ 'urlhttps://placekitten.com/g/350/150', 'urlhttps://placekitten.com/g/200/600', 'urlhttps://placekitten.com/g/550/250', 'urlhttps://placekitten.com/g/700/300', 'urlhttps://placekitten.com/g/300/550', 'urlhttps://placekitten.com/g/400/200', 'urlhttps://placekitten.com/g/350/750' ]; var active=Math.floorMath.random*url.length； 设置间隔函数{ 设rand=Math.floorMath.random*4； 如果兰德 变量URL=[ 'urlhttps://placekitten.com/g/350/150', 'urlhttps://placekitten.com/g/200/600', 'urlhttps://placekitten.com/g/550/250', 'urlhttps://placekitten.com/g/700/300', 'urlhttps://placekitten.com/g/300/550', 'urlhttps://placekitten.com/g/400/200', 'urlhttps://placekitten.com/g/350/750' ]; var active=Math.floorMath.random*url.length； 设置间隔函数{ 设rand=Math.floorMath.random*4；

---

如果rand我只是稍微修改了你的代码来制作这个新版本，使用淡出/淡入功能，使用可见性CSS属性。这只会使图像消失，背景会在一瞬间可见，然后新图像就会出现。有很多方法可以实现淡入效果，这就是其中之一。你可能需要例如，图像变黑，然后新图像出现。如果你想尝试其他类型的淡入淡出，你可以搜索

变量URL=[ 'urlhttps://placekitten.com/g/350/150', 'urlhttps://placekitten.com/g/200/600', 'urlhttps://placekitten.com/g/550/250', 'urlhttps://placekitten.com/g/700/300', 'urlhttps://placekitten.com/g/300/550', 'urlhttps://placekitten.com/g/400/200', 'urlhttps://placekitten.com/g/350/750' ]; var active=Math.floorMath.random*url.length； 设置间隔函数{ 设rand=Math.floorMath.random*4； 如果兰德

---

这种淡入淡出的效果很棒！但我认为它有时仍然会选择一个当时已经被某个div使用过的背景图像。我们可以防止吗？这是逻辑上的问题。我会添加fixHey Dibakar，你认为你还能帮我吗？我一直在尝试，但找不到解决方案。这就是我想要的ave到目前为止：您好，谢谢您的精彩解释。这些注释确实有助于理解您的代码！但是，它似乎有时仍然选择当前已可见的图像。我想防止它选择某个div在那一刻已经使用过的背景图像。@JaschaGoltermann是的，是的是这样的。因为在您的原始代码中，我认为这是故意的，所以我没有修改此部分。为了防止这种情况，请将var active=Math.floorMath.random*url.length替换为var active=Math.floorMath.random*url.length-4+1。这将创建一个介于1和3之间的随机数，而不是0和6，以便第一次备份选择的圆形图像不会是实际的4谢谢，这会阻止它选择div在开始时使用的四个图像中的一个，但不会阻止它选择一个div在以后使用的图像。有时，等待一段时间后，您会看到它选择了一个此时正在使用的图像g被另一个div使用。但我会将您的答案标记为已接受，因为它非常彻底且评论良好！请告诉我您是否能够满足最后一个要求。是的，要实现这一点，我认为您必须拥有一个数组，其中包含您当前使用的所有后台URL。当您更改div的后台时，然后更新数组。最后，当你选择一个新的随机bg url时，检查数组是否已经包含它。这可能是一个解决方案Hi@Dony听起来不错。你是否也知道如何将这个想法整合到上面的代码中？我只能在其他人的帮助下将代码组合在一起，但我永远也无法编写或删除这些代码我自己理解代码。。