Javascript 如何根据定时器更改背景图片？

Question

I have the following script which changes the image being displayed based on a timer我有以下脚本，它根据计时器更改显示的图像

<img id="image" src="image1.png">

        <script type = "text/javascript">
            var image = document.getElementById("image");
            var currentPos = 0;
            var images = ["image1.png","image2.png","image3.png"]

            function volgendefoto() {
                if (++currentPos >= images.length)
                    currentPos = 0;

                image.src = images[currentPos];
            }

            setInterval(volgendefoto, 3000);
        </script>

I want to apply this script to my websites background Image that I implement use CSS to allow the background Image to change WITHOUT Jquery我想将此脚本应用到我的网站背景图片，我使用 CSS 允许背景图片更改而无需 Jquery

body{
  background-image: url("https://images.pexels.com/photos/260352/pexels-photo-260352.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-repeat: repeat;
  font-family:monospace;
}

Answer 1

The script needs to be changed a bit to脚本需要稍微修改一下

function volgendefoto() {
  if (++currentPos >= images.length) currentPos = 0;

  document.body.style.backgroundImage = "url(" + images[currentPos] + ")";
  document.body.style.backgroundRepeat = "no-repeat";
}

Here images[currentPos] should return a valid URL to the image and You can add more properties as you see fit for your use case.这里images[currentPos]应该向图像返回一个有效的 URL 并且您可以添加更多您认为适合您的用例的属性。

Answer 2

 var body = document.getElementsByTagName("body")[0]; var images = ['url("http://static.jsbin.com/images/jsbin_static.png")', 'url("http://static.jsbin.com/images/popout.png")']; var current = 0; function nextImage() { body.style.backgroundImage = images[current = ++current % images.length]; setTimeout(nextImage, 1000); } setTimeout(nextImage, 1000);

 <body> </body>

Hope this might help js-fiddle :希望这可能对js-fiddle有所帮助：

var body = document.getElementsByTagName("body")[0];
var images = ['url("http://static.jsbin.com/images/jsbin_static.png")', 'url("http://static.jsbin.com/images/popout.png")'];
var current = 0;

function nextImage() {
  body.style.backgroundImage = images[current = ++current % images.length];
  setTimeout(nextImage, 1000);
}
setTimeout(nextImage, 1000);

Answer 3

when you say without jQuery i think that you want to add style as object like in jQuery here's a simple method.can do that当你说没有 jQuery 时，我认为你想将样式添加为 object，就像在 jQuery 中一样，这是一个简单的方法。可以做到这一点

function changeStyle(element, object) {
    for(var i in object) {
       element.style[i] = object[i];
    }
 }
//Usage
changeStyle(document.body, {
  "background-image": "url(image)",
  "background-repeat": "repeat",
  "font-family": "monospace"
})

using it with setInterval()与setInterval()一起使用

function changeStyle(element, object) {
    for(var i in object) {
       element.style[i] = object[i];
    }
 }
var n = 0, 
images = ["image1.png", "image2.png", "image3.png"]
function changeBody() {
  if(n === images.length) n = 0
   changeStyle(document.body, {
       "background-image": "url("+images[n]+")",
       "background-repeat": "repeat",
       "font-family": "monospace"
    })
     n++;
}
 setInterval(changeBody, 3000);

Answer 4

You need to change the url of background-image property, to a different image.您需要将background-image属性的url更改为不同的图像。 You can do this by setting elem.style.backgroundImage .您可以通过设置elem.style.backgroundImage来做到这一点。

 var body = document.body; var currentPos = 0; var images = ["https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80", "https://images.unsplash.com/photo-1485550409059-9afb054cada4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1260&q=750", "https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"] //replace this with array of your images function volgendefoto() { if (++currentPos >= images.length) currentPos = 0; body.style.backgroundImage = `url(${images[currentPos]})`; } setInterval(volgendefoto, 3000);

 body { background-image: url("https://images.pexels.com/photos/260352/pexels-photo-260352.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); background-repeat: repeat; font-family: monospace; }

Javascript 如何根据定时器更改背景图片？

问题描述

4 个解决方案

解决方案1
0 2021-08-16 05:23:39

解决方案2
0 2021-08-16 05:25:24

解决方案3
0 2021-08-16 06:01:51

解决方案4
0 2021-08-16 06:18:05

Javascript 如何根据定时器更改背景图片？

问题描述

4 个解决方案

解决方案1 0 2021-08-16 05:23:39

解决方案2 0 2021-08-16 05:25:24

解决方案3 0 2021-08-16 06:01:51

解决方案4 0 2021-08-16 06:18:05

解决方案1
0 2021-08-16 05:23:39

解决方案2
0 2021-08-16 05:25:24

解决方案3
0 2021-08-16 06:01:51

解决方案4
0 2021-08-16 06:18:05