定时图像变化

Timed images change

本文关键字：变化 图像 定时      更新时间：2023-09-26

我做了一些研究，但到目前为止我在网上找不到解决方案。

我建立了一个网站，我试图得到一个背景图像改变后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);">

但是我有这个错误。"未捕获的TypeError: Cannot read property 'style' of null"

香草JS，假设背景绑定到正文:

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

如果您更喜欢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);
});
相关文章：