Javascript 每次刷新页面时更改div的背景图像_Javascript_Jquery_Html_Css

Javascript 每次刷新页面时更改div的背景图像

javascript jquery html css

Javascript 每次刷新页面时更改div的背景图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,根据我在互联网上看到的情况，我应该能够在每次使用javascript脚本刷新页面时更改div的背景图像。因为某种原因它不起作用。任何帮助都将不胜感激这是html <div class="home-intro show-for-medium-up" id="home-intro"> </div> 这是js <script> function randomImage(){ var images = [ '../images/1.png',

根据我在互联网上看到的情况，我应该能够在每次使用javascript脚本刷新页面时更改div的背景图像。因为某种原因它不起作用。任何帮助都将不胜感激

这是html

<div class="home-intro show-for-medium-up" id="home-intro">
</div>

这是js

<script>


function randomImage(){
  var images = [
   '../images/1.png',
   '../images/2.png',
   '../images/3.png'];
  var size = images.length;
  var x = Math.floor(size * Math.random());
  console.log(x);
  var element = document.getElementsByClassName('home-intro');
  console.log(element);
  element[0].style["background-image"] = "url("+ images[x] + ") no-repeat;";
}

document.addEventListener("DOMContentLoaded", randomImage);


函数randomImage（）{
变量图像=[
“../images/1.png”，
“../images/2.png”，
'../images/3.png']；
var size=images.length；
var x=Math.floor（大小*Math.random（））；
控制台日志（x）；
var元素=document.getElementsByClassName（'home-intro'）；
控制台日志（元素）；
元素[0]。样式[“背景图像”]=“url”（+images[x]+”）不重复；”；
}
document.addEventListener（“DOMContentLoaded”，randomImage）；

我会的

<body onload="randomImage()">`

在

编辑：

或jQuery

$(function(){
    var x=Math.floor(size * Math.random());
    $('#home-intro').css('backgroundImage', '../images/' + x + '.png');
});

我会的

<body onload="randomImage()">`

在

编辑：

或jQuery

$(function(){
    var x=Math.floor(size * Math.random());
    $('#home-intro').css('backgroundImage', '../images/' + x + '.png');
});

唯一的问题是您试图设置

背景图像

属性的“不重复”属性。“无重复”是

background

属性的一个属性

唯一的问题是您试图设置

背景图像

属性的“不重复”属性。“无重复”是

background

属性的一个属性

您需要将高度添加到样式中

function randomImage(){
   var images = ["./hanuman.png","./jesus.jpg","./hanuman.png"];
   var size = images.length;
   var x = Math.floor(size * Math.random());
   console.log(x);
   document.getElementById("homeintro").style.height="1000px";
  document.getElementById("homeintro").style.backgroundImage = 
  "url("+images[x] +")";
                }

您需要将高度添加到样式中

function randomImage(){
   var images = ["./hanuman.png","./jesus.jpg","./hanuman.png"];
   var size = images.length;
   var x = Math.floor(size * Math.random());
   console.log(x);
   document.getElementById("homeintro").style.height="1000px";
  document.getElementById("homeintro").style.backgroundImage = 
  "url("+images[x] +")";
                }

生成的url字符串中可能缺少引号根据您给出的示例，图像不改变的概率为

1/3

，因为您依赖于random（）。您最好有一个类似于

document.cookie=“lastimg=1”的cookie如果您刚刚显示了第一张图像。现在在页面加载时，省略该选项，并使用random（）。添加背景重复属性（即no repeat）对背景图像无效。试试“url（“+images[x]+”；”
或者使用样式[“background”]
。在css文件中，颜色：$white
可能没有帮助可能在生成的url字符串中缺少引号根据您给出的示例，图像不改变的概率为1/3
，因为您依赖于random（）。您最好有一个类似于document.cookie=“lastimg=1”的cookie如果您刚刚显示了第一张图像。现在在页面加载时，省略该选项，并使用random（）。添加背景重复属性（即no repeat）对背景图像无效。试试“url（“+images[x]+”；”
或者使用样式[“background”]
。在css文件中，颜色：$white可能没有帮助你完全正确。我已经将背景图像更改为背景，现在工作正常。谢谢你的帮助你完全正确。我已经将背景图像更改为背景，现在工作正常。谢谢你的帮助，我试过了，但对我不起作用。我也使用了angular，所以我不确定身体的超负荷是否合适。正如前面的答案所说，将背景图像更改为背景效果非常好。我已经尝试过了，但对我来说不起作用。我也使用了angular，所以我不确定身体的超负荷是否合适。正如前面的回答所说，将背景图像更改为背景效果非常好。