定时图像更改[重复]答案

【问题标题】：Timed images change [duplicate]定时图像更改[重复]
【发布时间】：2014-07-04 10:15:56
【问题描述】：

我进行了一些研究，但目前在互联网上找不到解决方案。

我已经建立了一个网站，我试图让背景图片在 3 秒后更改，一旦更改，它就会停留在第二张图片上，没有无限循环。

我知道它可以用 CSS3 完成，但网站需要广泛兼容，所以我猜 JQuery/JS 是最好的解决方案？如果是这样，我该如何实施？

编辑

这是我正在使用的代码

<script>
        setTimeout(function(){
            document.getElementById(header).style.background = "url(<?php bloginfo('template_url') ?>/img/girl-color.jpg)";
        }, 3000);
    </script>
  </head>
  <body>
    <header id="header" style="background: url(<?php bloginfo('template_url') ?>/img/girl-bw.jpg);">

但我有这个错误。 “未捕获的类型错误：无法读取 null 的属性 'style'”

【问题讨论】：

你必须为此目的使用 jquery 插件...
@KartikeyaKhosla 不，你没有
你做了一些研究是什么意思？如果你用谷歌搜索“定时图像更改”，前 4 个结果是 4 种正确的方法
是的，但我不确定无限循环。

标签： javascript jquery css jquery-plugins

【解决方案1】：

Vanilla JS，假设背景绑定到正文：

setTimeout(function(){
     document.body.style.background = "url(here_goes_the_url)";
}, 3000);

【讨论】：

+1 如果可以的话，很高兴去香草 ;)
未捕获的类型错误：无法读取未定义的属性“样式”

【解决方案2】：

如果你更喜欢 jQuery，下面的怎么样：

$(function(){ //Document ready
    setTimeout(function(){ // 3000 miliseconds (3 seconds)
        $('body').css('background-image', "url('new_bg.jog')"); // this will change the bg for the body element, modify for your target element
    }, 3000);
});

【讨论】：

我似乎收到了这个错误“Uncaught ReferenceError: $ is not defined”
你确定你已经正确包含了 jQuery 吗？此外，它可能处于 noConflict 模式，因此请尝试将所有 $ 更改为 jQuery，例如 jQuery(function(){...})