JavaSript方式：

Question

首先，这是页面。

我尝试过Javascript代码但没有成功，所以我将尝试解释当前的设置。

我的身体的ID为#homepage。这是我需要此代码的唯一页面，因此我已经分配了该ID。以下是访问图像并覆盖页面的CSS：

body#homepage {
    background-attachment: fixed;
    background-image: url(../images/bg/4.jpg);
    background-repeat: no-repeat;
    background-position: center bottom; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

“../ images / bg”文件夹中有4个图像，编号为1到4.我只想让图像在4页加载之间切换，但我需要保持图像的样式，因为它们在当前的CSS。

由于我只是模糊地熟悉Javascript，我相信我在Javascript中遇到了一些非常简单的错误。我很感激有人在具体细节上为我拼写这个。非常感谢！

Answer 1

试试这个

var randomImage = Math.floor((Math.random()*4)+1);
var homePage = document.getElementById('homepage');

homePage.style.backgroundImage='url("..\/images\/bg\/'+randomImage+'.jpg")';

Answer 2

使用Jquery

$(document).ready(function(){
var num = getRandomArbitrary(1,4);
$('#homepage').css("background-image",'../images/bg/' + num + '.jpg')
});

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

Answer 3

document.getElementById（'homepage'）。style.backgroundImage ='url（/ whatever / img'+ Math.floor（Math.random（）* 4）+'。png）';

Answer 4

首先，你需要从1到4获得随机数。

我将向您展示纯JavaScript和jQuery方法：

JavaSript方式：

//get random number from 1 to 4 and assign '.jpg' - or other format you need
var randomImage = "..\/images\/bg\/" + Math.floor((Math.random()*4)+1) + '.jpg';

//get body by ID
var homePageBody = document.getElementById('homepage');

//asign random image to body
homePageBody.style.backgroundImage=randomImage;

jQuery方式：

$(document).ready(function () {
    var randomImage = '../images/bg/' + randomFromTo(1, 4) + '.jpg';

    //set background to body #homepage
    $('#homepage').css("background-image", randomImage)
});

//define randomizer function
function randomFromTo(rfrom, rto) {
    return Math.random() * (rfrom - rto) + rfrom;
}

尝试在页面刷新时更改背景图像，遇到问题

4 个答案:

JavaSript方式：

jQuery方式：