CSS Slider在FireFox中不起作用
[英]CSS Slider does not work in FireFox
问题描述
I try to make a little slider, but it works only in Google Chrome. 
我尝试制作一个小滑块，但它仅在Google Chrome中可用。
In FireFox (version 47) it doesn't work. 在FireFox（版本47）中，它不起作用。
The CSS file is that: 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;
}
and the HTML (with a little script): 和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: I need a solution for that code, not an alternative to use jQuery. PS：我需要一种用于该代码的解决方案，而不是使用jQuery的替代方法。
3 个解决方案
解决方案1
0 2016-07-26 20:21:27
您是否可以尝试将等于0的transition-delay（第4个参数）添加到所有属性中？
解决方案2
0 已采纳 2016-07-26 20:24:35
Firefox won't support it according to this bug nor is it an animatable property ( https://www.w3.org/TR/css3-transitions/#animatable-properties ). Firefox不会根据此bug支持它，它也不是可设置动画的属性（ https://www.w3.org/TR/css3-transitions/#animatable-properties ）。
See this awswer for details. 有关详细信息，请参见此awswer 。
解决方案3
0 2016-07-27 21:51:13
Maybe you can play with the opacity attribute. 也许您可以使用opacity属性。 Check this: http://www.quirksmode.org/js/opacity.html is a way to set opacity in all elemnts. 请检查以下内容： http ://www.quirksmode.org/js/opacity.html是一种在所有要素中设置不透明度的方法。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.