发表新帖
发表新帖

Make JavaScript change background image every 5 seconds

后端 未结
关注
3 1456
温柔的废话
温柔的废话 2021-01-22 08:34

I am trying to change my background image every 5 seconds. How should I go about this?

window.onload = function () {

  function Timer() {
    window.setInterval
相关标签:
3条回答
  • 抹茶落季
    2021-01-22 09:06

    you are accessing style incorrectly

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

    Also, if possible (usually is) don't pass a string to window.setInterval - use as above

    0 讨论(0)
  • 爱一瞬间的悲伤
    2021-01-22 09:08

    Here's a solution to your question. Hope it helps!

    <!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>
    0 讨论(0)
  • 时光说笑
    2021-01-22 09:16

    You can make few changes

    1.Not sure from where you are calling Timer function (better if have camelCase)

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

    Instead you can directly use 

    setInterval(changeImage, 5000);

    changeImage is a callback

    2.Could not make out what is this line mean

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

    Unsure if can attach a function to style property.

    Anyway this below snippet can be useful

    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

    0 讨论(0)
 看不清?
提交回复
热议问题