页面加载时的随机图像作为 Jumbotron 背景

Question

我正在尝试获取以下代码来为超大屏幕背景加载随机图像，但没有成功。我只是不知道哪一部分是问题所在。超大屏幕本身充当基本弹性滑块的区域。我基本上希望 flex 滑块的背景图像在每次页面加载时改变。

为此，我将以下脚本放在页面的头部：

<script type="text/javascript">
$(document).ready(function() {
    var images = ['01.jpg', '02.jpg'];
    $('.jumbotron').css({'background-image': 'url(../images/jumbotron/' + images[Math.floor(Math.random() * images.length)] + ')'});
});

我的 Jumbotron CSS 看起来像：

.jumbotron {
position: relative;
color: #fff;
/*text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 30px rgba(0, 0, 0, .075);*/
/*background:url(../images/header-bg.jpg) no-repeat #232a31; /* Old browsers */
height:630px;
background-size:cover;
overflow:hidden;
}

我已禁用 'background:url' 行（否则会加载一张图像），以允许在脚本中执行 'background-image:url'。好吧，根本没有图像加载！ http://webeutic.com/123.html

谁能帮帮我挠头？感谢大家

Answer 1

你有一个未捕获的类型错误：undefined is not a function in 123.html @ line: 215.

$(document).ready(function() {

似乎没有定义 jQuery() 的 $() 别名。请改用 jQuery()。

编辑：修复第一个错误后，您会注意到您的代码试图从错误的位置加载图像。这是由于相对路径在 CSS 文件中（相对于 CSS URL）和在 HTML 文件中（相对于 HTML URL)。要解决此问题，您需要更改路径以包含指向您的 /images 文件夹的文件夹。

下面的代码包含两个修复程序

jQuery(document).ready(function() {
    var images = ['01.jpg', '02.jpg'];
    jQuery('.jumbotron').css({'background-image': 'url(/wp-content/themes/flathost/assets/images/jumbotron/' + images[Math.floor(Math.random() * images.length)] + ')'});
});

页面加载时的随机图像作为 Jumbotron 背景

Random image on page load as Jumbotron background

css

flexbox