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

Question

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

页面底部有一个小字幕，如果根据相关背景更改它会很棒。如果它太复杂，我不会打扰，但认为它看起来不错！最好我有 5 张图片，每张都有自己的字幕。

如果您想让我澄清任何事情，请告诉我，并提前致谢！

Answer 1

以下是在 JQuery 中：只需将每个图像命名为 bg1 或 bg2

//  On Page Load
  backgroundSelect();

function backgroundSelect(){
  var sub1 = "this is my subtitle"

  var numImgs = 5;  // The Number of images you have total.
  var select  = Math.round(Math.random() * numImgs) + 1;  // add one so not zero based.

  $('body').css('background-image', 'bg' + select);
  $('subtitle_element').replaceWith(sub1);
}

这不是编写代码的最简洁和最语义化的方式。但希望它能让你朝着正确的方向开始。

Answer 2

最简单的方法，在纯 JavaScript 中：

var images = [
    {
        subtitle : 'Subtitle text for image one...',
        src : 'http://placekitten.com/1000/1000'
    },
    {
        subtitle : 'Subtitle text for image two...',
        src : 'http://lorempixel.com/1000/1000/people/'
    },
    {
        subtitle : 'Subtitle text for image three...',
        src : 'http://lorempixel.com/1000/1000/nightlife/'
    },
    {
        subtitle : 'Subtitle text for image four...',
        src : 'http://lorempixel.com/1000/1000/nature/'
    }
];

function setBackground (images) {
    // generates a random integer between 0 and the length of the supplied array:
    var n = Math.floor(Math.random() * images.length),
        // works out whether to use the 'textContent' or 'innerText' property:
        textProperty = 'textContent' in document ? 'textContent' : 'innerText';

    // sets the background-image of the 'body' element:
    document.body.style.backgroundImage = 'url(' + images[n].src + ')';

    // sets the text of the relevant subtitle element:
    document.getElementById('subtitleElementID')[textProperty] = images[n].subtitle;
}

setBackground(images);

JS 小提琴演示。

或者，如果您希望每n毫秒更改一次背景，您可以添加以下内容：

window.setInterval(function(){
    setBackground(images)
}, 5000);

JS 小提琴演示。

显然，它将每 5000 毫秒更改一次图像（和字幕）。

Answer 3

由于您使用的是 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 & body CSS 以反映选择

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

这将在每个页面加载时选择一个新的图像和字幕