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.不确定从哪里调用定时器功能（如果有更好的话）有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 个答案: