循环随机背景图像答案

【问题标题】：Loop random background image循环随机背景图像
【发布时间】：2015-08-31 08:34:34
【问题描述】：

我想显示一个随机背景图像，它会在五秒后启动一个随机的其他背景图像循环。

首先我为我的背景图像创建一个数组：

<?php
  $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg', 'bg6.jpg', 'bg7.jpg', 'bg8.jpg', 'bg9.jpg', 'bg10.jpg', 'bg11.jpg');
  $i = rand(0, count($bg)-1);
  $selectedBg = "$bg[$i]";
?>

第二我将随机图像附加到我的身体：

<style>
 @media screen and (min-width: 600px) {
    body {
      background-image: url(<?php bloginfo('template_url'); ?>/images/backgrounds/<?php echo $selectedBg; ?>);
    }
 }
</style>

现在我想使用php 或jQuery 来选择另一个随机图像并更改背景。我怎样才能做到这一点？

【问题讨论】：

将图像列表作为 JSON 文字一起发送。或者如果无论如何枚举图像，只需在 JS 中 rand(1,11) 并在那里重建路径。（或如：Random CSS background image 或 Random background image with corresponding attribution link?）
您的代码无效或您需要实时更改 bg？

标签： php jquery html

【解决方案1】：

如果您想每 5 秒循环一次背景图像（无需用户重新加载页面），您无法在 PHP 上执行此操作，必须在客户端（Javascript）完成。

PHP 是一种生成 HTML 代码的工具，该代码将在用户的浏览器上呈现，但它不能更改页面，这就是 javascript 的用途。

<script type="text/javascript">

    // declare list of backgrounds
    var images = ['bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg'];

    // declare function that changes the background
    function setRandomBackground() {
        // choose random background
        var randomBackground = images[Math.floor(Math.random() * images.length)];

        // set background with jQuery
        $('body').css('background-image', 'url("images/' + randomBackground + '")');
    }

    // declare function that sets the initial background, and starts the loop.
    function startLoop() {
        // Set initial background.
        setRandomBackground();

        // Tell browser to execute the setRandomBackground every 5 seconds.
        setInterval(setRandomBackground, 5 * 1000);
    }

    // One the page has finished loading, execute the startLoop function
    $(document).ready(startLoop);

</script>

【讨论】：

非常感谢@Eloims 的这个建议。我不明白的代码的唯一部分是5 * 60 * 1000。 javascript 是否以毫秒为单位计算并且您正在计算它（使用 5 * 60）？ 1000 哪里来的？
setInterval 参数以毫秒为单位。 5*60*1000 表示“5 分钟”。我本可以写“300000”而不是“5*60*1000”，但这很难阅读。无论如何，我将其更正为“5 * 1000”，因为您想要 5 秒，而不是 5 分钟。我的错！
在测试您的剪辑时，我必须将 url() 添加到 background-image 以使其工作。您可以在这里查看：jsfiddle.net/qhomove2/4 这是必要的调整吗？如果是这样，请将其添加到您的答案中，以便我将其标记为正确的！
是的。抱歉打错了，我实际上并没有测试代码:)

【解决方案2】：

尝试使用less和js之类的：

    var timeout = 1000;      
    var action = function() {    
        var random = Math.floor(Math.random() * 6) + 1 ;
        if(random.length<=1){random = '0'+random;}
        var wynikLos = 'path/to/file/bg-'+random+'.jpg';
        less.modifyVars({
          '@img': wynikLos
        });
        setTimeout(action, timeout);
    };
    action();

少：

body{background-image:@img;}

http://lesscss.org/

附言未测试

【讨论】：