Question

我有CSS显示覆盖整个页面的完整图像。

#backgroundjake {
  display: block;
  margin: 0;
  background: #fff  fixed;
  background-position: top right;
  /*background-position: contain;*/
  background-size: cover;
  position: relative;
  z-index: 5;
  top: 0;
  background-repeat: no-repeat;
  background-image: url("images/bb7.jpg");
}

我一直在尝试理解jQuery，我有这些脚本根本不会产生结果。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" >

 var images = new Array('images/bb1.jpg', 'images/bb2.jpg', 'images/bb3.jpg',    'images/bb4.jpg', 'images/bb5.jpg', 'images/bb6.jpg', 'images/bb7.jpg',     'images/bb8.jpg' );
  var num = Math.ceil( Math.random() * totalCount );
 $("#backgroundjake")).css('backgroundImage', 'url(' +images[num]+ ')');

</script>

我在html中调用了这样的css类：

 <div id= "backgroundjake"  name= "backgroundjake" >

Answer 1

这是一个JSFiddle，为您的问题提供解决方案：

编辑：我使用floor()函数代替ceil()，因为我注意到了随机错误。

See this fiddle

JS代码：

$(document).ready(function(){
  var images = new Array('http://lorempicsum.com/futurama/627/300/4', 'http://lorempicsum.com/futurama/350/200/6','http://lorempicsum.com/futurama/255/200/5');
  var num = Math.floor( Math.random() * images.length );
  $("#backgroundjake").css('backgroundImage', 'url(' +images[num]+ ')');

  $("h2").click(function(){
      $(this).css('textShadow','#6374AB 4px 4px 4px');
  });
});

关于您的代码，在调用vars并测试它们时要小心。例如，您调用＆＃34; totalCount＆＃34; var即使代码中没有定义，也不会有效。

Answer 2

您应该使用JavaScript random()方法来返回随机数。

此处有更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

＆＃13;

$(document).ready(function() {
  var array_images = new Array('http://placehold.it/350x150/000000', 'http://placehold.it/350x150/e63c3c', 'http://placehold.it/350x150/3ce690');

  var num = Math.floor(Math.random() * array_images.length);

  $("#backgroundjake").css('background-image', 'url(' + array_images[num] + ')');


});

＆＃13;

html,
body {
  height: 100%;
  min-height: 100%;
}
#backgroundjake {
  display: block;
  margin: 0;
  background: #fff fixed;
  background-position: top right;
  width: 100%;
  height: 100%;
  background-size: cover;
  position: relative;
  z-index: 5;
  top: 0;
  background-repeat: no-repeat;
  background-image: url("http://placehold.it/350x150/e63c3c");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="backgroundjake">
  <h2>
    lorem ipsum
  </h2>
</div>

＆＃13;

使用jQuery随机设置图像背景

2 个答案: