Php home.body上的jquery图像随机_Php_Jquery_Html_Css_Wordpress

Php home.body上的jquery图像随机

php jquery html css wordpress

Php home.body上的jquery图像随机,php,jquery,html,css,wordpress,Php,Jquery,Html,Css,Wordpress,每次加载或刷新我的wordpress站点主页时，我都会尝试在其上加载一个随机的背景图像。以下是我目前掌握的代码：这是我在样式表中的代码 style.css body.home { background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cove

每次加载或刷新我的wordpress站点主页时，我都会尝试在其上加载一个随机的背景图像。以下是我目前掌握的代码：

这是我在样式表中的代码

style.css

body.home {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    height: 100%;
    width: 100%;}

这是我在home.php文件中的代码

add_filter('body_class','random_background_images');
function random_background_images($classes) {

    // Generate Random number from 1 to 7.  
    $background_class = 'background_' . rand(1,7);

    $classes[] = $background_class;

    return $classes;
}

home.php

<script>
      var randomImage = {
        paths: [
          "images/home-bg/website-background1.jpg",
          "images/home-bg/website-background2.jpg",
          "images/home-bg/website-background3.jpg",
          "images/home-bg/website-background4.jpg",
          "images/home-bg/website-background5.jpg",
          "images/home-bg/website-background6.jpg",
          "images/home-bg/website-background7.jpg",
        ],
        generate: function(){
          var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
          var img = new Image();
          img.src = path;
          $("body.home").html(img);
          $("body.home").attr("href", path);
        }
      }
      randomImage.generate();
</script>


var随机图像={
路径：[
“images/home bg/website-background1.jpg”，
“images/home bg/website-background2.jpg”，
“images/home bg/website-background3.jpg”，
“images/home bg/website-background4.jpg”，
“images/home bg/website-background5.jpg”，
“images/home bg/website-background6.jpg”，
“images/home bg/website-background7.jpg”，
],
生成：函数（）{
var path=randomImage.path[Math.floor（Math.random（）*randomImage.path.length）]；
var img=新图像（）；
img.src=路径；
$（“body.home”）.html（img）；
$（“body.home”）.attr（“href”，path）；
}
}
randomImage.generate（）；

如果你想查看其网站

谢谢，

William

将randomImage对象和randomImage.generate调用包装在jQuery.ready（）方法中，以便在DOM完全加载时执行

另外，将“.home”与“body”隔开，这将查询body中的“home类”


$（文档）.ready（函数（）{
var随机图像={
路径：[
“images/home bg/website-background1.jpg”，
“images/home bg/website-background2.jpg”，
“images/home bg/website-background3.jpg”，
“images/home bg/website-background4.jpg”，
“images/home bg/website-background5.jpg”，
“images/home bg/website-background6.jpg”，
“images/home bg/website-background7.jpg”，
],
生成：函数（）{
var path=randomImage.path[Math.floor（Math.random（）*randomImage.path.length）]；
变量img=$（'

查看

只需更改

正文

背景，如下所示：

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<body>

</body>

<script>
      var randomImage = {
        paths: [          
          "https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg",
          "http://www.riscon.co.uk/wp-content/uploads/2015/08/sample3.jpg",
          "http://cdn6.fonearena.com/i/SonyXperiaZ2CameraSamples/sony-xperia-z2-camera-sample-macro-6.jpg",
          "https://cdn.photographylife.com/wp-content/uploads/2012/10/Nikon-D600-Sample-4.jpg",
        ],
        generate: function(){
          var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];       
          $('body').css('background', 'url('+path+') no-repeat');                     
        }
      }
      randomImage.generate();
</script>


var随机图像={
路径：[
"https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg",
"http://www.riscon.co.uk/wp-content/uploads/2015/08/sample3.jpg",
"http://cdn6.fonearena.com/i/SonyXperiaZ2CameraSamples/sony-xperia-z2-camera-sample-macro-6.jpg",
"https://cdn.photographylife.com/wp-content/uploads/2012/10/Nikon-D600-Sample-4.jpg",
],
生成：函数（）{
var path=randomImage.path[Math.floor（Math.random（）*randomImage.path.length）]；
$（'body'）.css（'background'，'url（'+path+'）不重复'）；
}
}
randomImage.generate（）；

我可以通过在functions.php文件中添加一段php来实现这一点

add_filter('body_class','random_background_images');
function random_background_images($classes) {

    // Generate Random number from 1 to 7.  
    $background_class = 'background_' . rand(1,7);

    $classes[] = $background_class;

    return $classes;
}

然后我将CSS更改为以下内容：

body.home.background_1 {
    background-image: url("images/home-bg/website-background1.jpg");
}
body.home.background_2 {
    background-image: url("images/home-bg/website-background2.jpg");
}
body.home.background_3 {
    background-image: url("images/home-bg/website-background3.jpg");
}
body.home.background_4 {
    background-image: url("images/home-bg/website-background4.jpg");
}
body.home.background_5 {
    background-image: url("images/home-bg/website-background5.jpg");
}
body.home.background_6 {
    background-image: url("images/home-bg/website-background6.jpg");
}
body.home.background_7 {
    background-image: url("images/home-bg/website-background7.jpg");
}

如果希望所有页面上的背景都发生更改，而不仅仅是主页，请从CSS示例中删除.home：

body.background_1 {
        background-image: url("images/home-bg/website-background1.jpg");
    }

希望这能帮助其他正在寻找的人：-）

而不是

$（“body.home”）

将

body

从

中分离出来。home

$（“body.home”）.html（img）；，这对我有用。您好@Amit这不起作用。页面仍然没有加载背景图像。还有其他想法吗？@William您查看了我的“演示”吗链接，在这里工作正常。以我为例。嗨@Akinjide，这不起作用。页面仍然没有加载背景图像。还有其他想法吗？@William我使用jQuery创建img标记的方式更改了上述代码