简体   繁体   中英

How Do I Make My Background Image Change Every 15 Seconds Or So Via CSS & JS

What I need it to do is change the background randomly every 15 seconds or so.
JS:

<script>
    (function () {
        var curImgId = 0;
        var numberOfImages = 5; // Change this to the number of background images
        window.setInterval(function () {
            $('body').css('background-image', 
             'url(/images/background_images' + curImgId + '.jpg)');
            curImgId = (curImgId + 1) % numberOfImages;
        }, 15 * 1000);
    })();
</script>

CSS:

body {
    margin:0;
    /*background-image:url(images/background_images/image1.jpg);
    background-image:url(images/background_images/image2.jpg);
    background-image:url(images/background_images/image3.jpg);
    background-image:url(images/background_images/image4.jpg);*/
    background:url(upload.js);
    background-size:cover;
    background-repeat:no-repeat;
}

A list of images I am going to use

http://mrsnapatya.net/screenshot1.png

the file directory is /images/background_images/

So any clue what I'm doing wrong?

url函数需要一个字符串 -

$('body').css('background-image','url("images/background_images/image' + curImgId + '.jpg")');

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM