我正在尝试在我的网站上实现一个简单的背景图片幻灯片演示,但是我在互联网上找不到很好的教程,所以我想在这里询问。
HTML:
Raj India 1000 ~$| John Canada 2000 ~$| Steve USA 3000 ~$| Jason USA 4000
JS:
<body>
<h3>Welcome!</h1>
<p>Lorem ipsum dolor sit amet</p>
</body>
CSS:
var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds
images[0] = '/img/bg1.jpg';
images[1] = '/img/bg2.jpg';
images[2] = '/img/bg3.jpg';
function changePicture() {
document.body.style.backgroundImage = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("changePicture()", slideTime);
}
window.onload = changePicture;
答案 0 :(得分:1)
背景图像在传递图像文件时需要URL来包装图像文件。
var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds
images[0] = 'https://via.placeholder.com/150/300AAA';
images[1] = 'https://via.placeholder.com/150/000300';
images[2] = 'https://via.placeholder.com/150/AAA300';
function changePicture() {
document.body.style.backgroundImage = "url(" + images[i] + ")";
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout(changePicture, slideTime);
}
window.onload = changePicture;
body {
background-image: url("https://via.placeholder.com/150/300AAA");
background-position: center;
background-size: cover;
}
<h3>Welcome!</h3>
<p>Lorem ipsum dolor sit amet</p>