让JavaScript每5秒更改一次背景图像_Javascript_Html

让JavaScript每5秒更改一次背景图像

javascript html

让JavaScript每5秒更改一次背景图像,javascript,html,Javascript,Html,我正在尝试每5秒更改一次背景图像。我该怎么做 window.onload = function () { function Timer() { window.setInterval("changeImage()", 5000); } function changeImage() { var BackgroundImg["./Img/Bg1.jpg", "./Img/Bg2.jpg",

我正在尝试每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];
  }
}

您访问样式的方式不正确

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);
}

另外，如果可能的话（通常是），不要将字符串传递到

窗口。setInterval

-如上所述使用以下是问题的解决方案。希望有帮助

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


改变形象
函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.getElementById（“img”）.src=images[x]；
}
函数changeImage（）{
设置间隔（displayNextImage，5000）；
}
var图像=[]，x=-1；
图像[0]=”http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg";
图像[1]=”http://www.planwallpaper.com/static/images/background-gmail-google-images_FG2XwaO.jpg";
图像[2]=”http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg";

您可以做一些更改

1.不确定从何处调用计时器功能（如果（有案例）

相反，您可以直接使用

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]+"')";

      }
    }

参见@Kyle McCarthy：我建议改为获取随机值。使用totalimage长度创建一个数组。洗牌。从索引0开始。如果你到达了最终的索引。然后再次洗牌并继续。因此，您可以避免相同的图像重复。添加断点和单步执行代码时，您会看到什么？此外，从未调用函数

timer（）

。没有注意到，在原始：D-不需要是函数，只需window.setInterval即可：pShouldn不是4，不是3？@torazaburo-aaaaaarghhh是的-虽然不是我的逻辑问题-我不能期望调试原始问题的每一行以确保它有意义！！：p（开玩笑）@AndrewE-是的。。。3年了，你是唯一一个发现我故意错误的人，没有修复代码的那一部分：你可以用你的图片替换我使用的URL。你好，亨利，有办法改变它，但是用某种动画？还是过渡@Henrydesign有没有一种方法可以使图像数组动态化，所以如果我将更多图像上传到一个文件夹，它只会使用文件夹中的所有图像？

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]+"')";

      }
    }