jquery图像在home.body上随机答案

【问题标题】：jquery image random on home.bodyjquery图像在home.body上随机
【发布时间】：2016-05-19 04:40:34
【问题描述】：

每次加载或刷新页面时，我都会尝试在我的 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/

谢谢，威廉

【问题讨论】：

而不是 $("body.home") 将 body 与 .home $("body .home").html(img); 分开，这对我有用。

标签： php jquery html css wordpress

【解决方案1】：

只需更改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

【讨论】：

嗨@Amit 这不起作用。该页面仍未加载背景图像。还有其他想法吗？
@William 你检查了我的“DEMO”链接吗，它在这里工作正常。以我为榜样。

【解决方案2】：

我可以通过在我的functions.php 文件中添加一个php 的snip-it 来实现这一点。

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");
    }

希望这可以帮助其他正在寻找的人:-)

【讨论】：

【解决方案3】：

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

同时将“.home”从“body”中隔开，这会在 body 中查询“home class”

<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

【讨论】：

嗨@Akinjide 这不起作用。该页面仍未加载背景图像。还有其他想法吗？
@William 我用jQuery创建img标签的方式改变了上面的代码