抱歉问题标题模糊,
var background = [
"background: linear-gradient(to left, #F0C27B, #4B1248)",
"background: linear-gradient(to left, #5614B0, #DBD65C)",
"background: linear-gradient(to left, #004FF9, #FFF94C)",
"background: linear-gradient(to left, #FFA17F, #00223E)",
"/css/1.png",
"/css/2.png",
"/css/3.png",
"/css/4.png"
];
setInterval(function() {
var chosenImage = Math.floor(Math.random() * (8));
if chosenImage < 4 {
document.body.style.backgroundColor = "url(" + background[chosenImage] + ")";
} else {
document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
}
}, 10000);
基本上,这(使用 css 和 html 文件)随机播放网站上的背景图片,每 10 秒随机显示一张。之前我的代码没有渐变
var images = ["1.png", "2.png", ...] (up to 4)
和这样的setInterval
setInterval(function() {
var chosenImage = Math.floor(Math.random() * (4));
document.body.style.backgroundImage = "url(" + background[chosenImage] + ")";
}, 10000);
它工作正常,但是一旦我实现了您在开头的代码片段中看到的内容,图像就停止更改,而是显示我在 css 文件中指定的默认图像。
关于为什么它不随渐变变化有任何想法吗?谢谢!
最佳答案
您设置渐变的方式存在一些问题。
首先,您不想在样式中包含 background:
,因为您已经直接分配给 backgroundImage
和 backgroundColor
属性。
其次,您不想用 url( )
包装渐变版本。 url( )
从字面上看需要一个 URL,但你给它一个渐变。
最后,您不想使用 backgroundColor
,因为渐变被视为图像,因此您可以将脚本简化为这样的东西。
var background = [
"linear-gradient(to left, #F0C27B, #4B1248)",
"linear-gradient(to left, #5614B0, #DBD65C)",
"linear-gradient(to left, #004FF9, #FFF94C)",
"linear-gradient(to left, #FFA17F, #00223E)",
"url(/css/1.png)",
"url(/css/2.png)",
"url(/css/3.png)",
"url(/css/4.png)"
];
setInterval( function() {
var chosenImage = Math.floor( Math.random( ) * 8 );
document.body.style.background = background[ chosenImage ];
}, 10000 );
关于JavaScript 函数不适用于渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36001758/