Question

我尝试制作一个小滑块，但它仅适用于Google 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的替代方案。

Answer 1

您可以尝试将transition-delay（第4个参数）等于0添加到所有属性中吗？

Answer 2

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

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

Answer 3

也许你可以使用opacity属性。检查一下：http://www.quirksmode.org/js/opacity.html是一种在所有元素中设置不透明度的方法。

CSS Slider在FireFox中不起作用

3 个答案: