Question

每次加载或刷新页面时，我都会尝试在我的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文件中的代码。

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>

如果您想查看网站http://americasfinestlighting.com/

谢谢，威廉

Answer 1

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

也是空间＆＃34; .home＆＃34;来自＆＃34; body＆＃34;这查询＆＃34;家庭班＆＃34;在身体

<script>
  $( document ).ready(function() {
    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 = $('<img id="img-responsive">'); // This is Equivalent to $(document.createElement('img'))
        img.attr('src', path);
        img.appendTo('#imagediv'); // The div ID you want to append to
      }
    }

    randomImage.generate();
  });
</script>

查看CODEPEN

Answer 2

只需更改body背景，如下所示：

<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>

DEMO

Answer 3

我能够通过在我的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");
    }

希望这有助于其他正在寻找的人： - ）

jquery图像随机在home.body

3 个答案: