php - 循环随机背景图像

Question

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

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

<?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]";
?>

第二我将随机图像附加到我的 body 上:

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

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

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