使JavaScript每5秒更改一次背景圖片

Question

我試圖每5秒更改一次我的背景圖片。 我應該怎么做？

window.onload = function () {

  function Timer() {
    window.setInterval("changeImage()", 5000);
  }

  function changeImage() {   
    var BackgroundImg["./Img/Bg1.jpg",
                      "./Img/Bg2.jpg",
                      "./Img/Bg3.jpg",
                      "./Img/Bg4.jpg"];
    var i = Math.floor((Math.random() * 3));
    var bgImg = document.body.style.backgroundImage();
    bgImg.url = BackgroundImg[i];
  }
}

Answer 1

您錯誤地訪問樣式

window.onload = function () {

    function changeImage() {   
        var BackgroundImg=["./Img/Bg1.jpg",
            "./Img/Bg2.jpg",
            "./Img/Bg3.jpg",
            "./Img/Bg4.jpg"
        ];
        var i = Math.floor((Math.random() * 4));
        document.body.style.backgroundImage = 'url("' + BackgroundImg[i] + '")';
    }
    window.setInterval(changeImage, 5000);
}

另外，如果可能（通常是），請勿將字符串傳遞給window.setInterval像上面一樣使用

Answer 2

這是您問題的解決方案。 希望能幫助到你！

<!DOCTYPE html>

<html>
<head>
  <title>change picture</title>
  <script type = "text/javascript">
      function displayNextImage() {
          x = (x === images.length - 1) ? 0 : x + 1;
          document.getElementById("img").src = images[x];
      }
      function changeImage() {
          setInterval(displayNextImage, 5000);
      }

      var images = [], x = -1;
      images[0] = "http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg";
      images[1] = "http://www.planwallpaper.com/static/images/background-gmail-google-images_FG2XwaO.jpg";
      images[2] = "http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg";
  </script>
  </head>
  <body onload = "changeImage()">
   <img id="img" src="http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg"/>
  </body>
  </html>

Answer 3

你可以做些改變

1.不確定從哪里調用Timer函數（最好是使用camelCase）

function Timer() {
    window.setInterval("changeImage()", 5000);
  }

相反，您可以直接使用

setInterval(changeImage, 5000);

changeImage是一個回調

2.無法弄清楚這是什么意思

var bgImg = document.body.style.backgroundImage();

不確定是否可以將一個功能附加到樣式屬性。

無論如何，下面的代碼片段可能很有用

window.onload = function () {
     // Array of Images
      var backgroundImg=["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyB57zuc4bms-hDtWMa-4BZvscIlJDm4r7a9WLaO4SAxUvKM-DDA",
                        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQBinSpWOvAtkxjmkf709O3rjH2ObRbWAEn9s0JcWaeL6LMtCbOrQ",
                        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRKY4J2qIFqkuDnABMzeypywbMSZL1cleS8vpySz0KD02wOYORU1g",
                        "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRQkdQT0zN0xDVP-VuvwojSbS5dOstX14eZvJCOWNPxKJ5dWTIc"
                        ]

        setInterval(changeImage, 5000);
       function changeImage() {   
        var i = Math.floor((Math.random() * 3));

        document.body.style.backgroundImage = "url('"+backgroundImg[i]+"')";

      }
    }

DEMO

使JavaScript每5秒更改一次背景圖片

問題描述

3 個解決方案

解決方案1
1 2016-01-09 05:47:45

解決方案2
0 2016-01-09 05:52:45

解決方案3
0 2016-01-09 06:21:42

使JavaScript每5秒更改一次背景圖片

問題描述

3 個解決方案

解決方案1 1 2016-01-09 05:47:45

解決方案2 0 2016-01-09 05:52:45

解決方案3 0 2016-01-09 06:21:42

解決方案1
1 2016-01-09 05:47:45

解決方案2
0 2016-01-09 05:52:45

解決方案3
0 2016-01-09 06:21:42