CSS滑块在FireFox中不起作用

问题描述：

我尝试制作一个小滑块，但它仅适用于Google Chrome。CSS滑块在FireFox中不起作用

在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 。

当你说它不起作用 - 你是什么意思？有错误吗？行为是否意外？ @Doro – Mark

这不是什么应该有的行为。例如，在Chrome中，图像以幻灯片效果进行更改，但在Firefox中即时更改，不会产生任何影响。 – Doro

答

根据this bug，Firefox不支持它，也不是动画属性（https://www.w3.org/TR/css3-transitions/#animatable-properties）。

有关详细信息，请参见this awswer。

感谢您的回答。 – Doro

答

你可以尝试在所有属性中添加等于0的转换延迟（第4个参数）吗？

是的，它的工作原理，但我需要一个副作用，而不是延迟...我想我会用jQuery构建它.... – Doro

答

也许你可以玩不透明属性。选中此项：http://www.quirksmode.org/js/opacity.html是一种设置所有元素不透明度的方法。

CSS滑块在FireFox中不起作用

相关推荐