javascript - 在页面刷新时随机更改 HTML 背景

Question

我知道这个主题已被查看过很多次，但我希望我的主页随机选择一张图片，然后更改该图片的副标题。我网站的 URL 是:http://www.connorloughlin.com

页面底部有一个小副标题，如果能根据相关背景改一下就好了。如果它太复杂，我不会打扰，但认为它看起来不错!最好我有 5 张图片，每张图片都有自己的副标题。

如果您想让我澄清任何事情，请告诉我，在此先感谢您!

Answer 1

由于您使用的是 jQuery，我使用它制作了一个版本:http://jsbin.com/OQugAMI/4/edit

1) 创建一个包含图像和字幕列表的数组

    var backgrounds = [
  {  image: 'http://www.connorloughlin.com/images/background.jpg',
   subtitle: 'Looking out at Carcassonne, France - August 2013'
  },
  {  image: 'http://upload.wikimedia.org/wikipedia/commons/1/13/1632x1224_sertaoe_2_rio_grande_do_norte_landscape_panorama_brasil.jpg',
   subtitle: 'Version 2'
  },
  {  image: 'http://upload.wikimedia.org/wikipedia/commons/7/71/1632x1224_sertaoe_rio_grande_do_norte_landscape_panorama_brasil.jpg',
   subtitle: 'Version 3'
  }
       ]; 

2) 从该数组中选择一个随机图像

/**
 * Returns a random integer between min and max
 * Using Math.round() will give you a non-uniform distribution!
 * http://stackoverflow.com/questions/1527803/generating-random-numbers-in-javascript-in-a-specific-range
 */
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function(){
    var bgNumber = getRandomInt(0, backgrounds.length-1);
}

3) 更新 H4 和主体 CSS 以反射(reflect)选择

$('body').css('background-image', 'url('+backgrounds[bgNumber].image+')');
$('h4').html(backgrounds[bgNumber].subtitle);

这将在每次页面加载时选择一个新的图像和副标题