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 。

來源

2016-07-26 Doro

當你說它不起作用 - 你是什麼意思？有錯誤嗎？行爲是否意外？ @Doro – Mark

這不是什麼應該有的行爲。例如，在Chrome中，圖像以幻燈片效果進行更改，但在Firefox中即時更改，不會產生任何影響。 – Doro