Javascript 如何根據定時器更改背景圖片？

Question

我有以下腳本，它根據計時器更改顯示的圖像

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

我想將此腳本應用到我的網站背景圖片，我使用 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

腳本需要稍微修改一下

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

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

這里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>

希望這可能對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

當你說沒有 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"
})

與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

您需要將background-image屬性的url更改為不同的圖像。 您可以通過設置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