我试着制作一个小滑块，但它只能在谷歌Chrome中使用。
在FireFox（版本47）中，它不起作用。
CSS文件是：
#home-container {
width: 500px;
height: 300px;
background-image: url("img1.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
和HTML（带有一个小脚本）：
<!DOCTYPE html>
<html>
<head>
<title>CSS Slider</title>
<link rel="stylesheet" href="style.css"/>
<script>
var index = 0;
function changeImage() {
var imgArr = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
document.getElementById("home-container").style.backgroundImage = "url('" + imgArr[index] + "')";
index++;
if (index >= imgArr.length) {
index = 0;
}
}
setInterval(changeImage, 2000);
</script>
</head>
<body>
<div id="home-container">
</div>
</body>
</html>
PS：我需要一个代码的解决方案，而不是使用jQuery的替代方案。
Firefox根据这个错误将不支持它，也不是可动画化的属性(https://www.w3.org/TR/css3-transitions/#animatable-属性）。
有关详细信息，请参阅此awswer。
是否可以尝试将等于0的转换延迟（第四个参数）添加到所有属性中？
也许您可以使用不透明度属性。检查此项：http://www.quirksmode.org/js/opacity.html是在所有元素中设置不透明度的一种方法。