Question

我正在尝试使用以下代码为jumbotron背景加载随机图像但没有成功。我只是不知道哪个部分是问题。 jumbotron本身充当基本柔性滑块的区域。我基本上希望flex滑块的背景图像在每次页面加载时都会改变。

为了尝试这一点，我将以下脚本放在页面的head部分：

<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

你有一个Uncaught TypeError：undefined不是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背景加载

1 个答案: