使用 jQuery 随机设置图像背景

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 class:

 <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 和测试它们时要小心。例如，你调用 "totalCount" var 即使它没有在代码中定义，所以它不会起作用。

Answer 2

你应该使用JavaScriptrandom()方法才能return一个随机数。

更多信息在这里： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

$(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] + ')');


});

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");
}

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

使用 jQuery 随机设置图像背景

Randomly set image background using jQuery

html

css

jquery

background-image