关于如何设置网页自动切换背景图片

如何设置背景图片

<style type="text/css">
        body{
            background-image: url("../image/a.jpeg");
        }
    </style>

这里的

 background-image: url("../image/a.jpeg");

就是用来设置网页背景图片的。

通过点击按钮来触发“切换背景图片”这个命令

部分源代码

<script type="text/javascript">
        var imgs=["../image/a.jpeg","../image/b.jpeg","../image/c.jpeg","../image/d.jpeg","../image/e.jpg"];
        var index;
        function qiehuan(){
            index=Math.floor(Math.random()*imgs.length);
            console.log(index);
            document.body.style.backgroundImage="url("+imgs[index]+")";
        }
    </script>

这里的按钮就是用来调用上面script里面的 qiehuan() 方法，然后实现切换背景图片的

 <input type="button" οnclick="qiehuan()" id="but"value="切换背景图片"style="width: 200px;height: 200px;">

重点

如何在script里面改变网页的背景图片

document.body.style.backgroundImage="url("+imgs[index]+")";

通过document来获取body，然后设置style里面的backgroundImage的值
注意：这里要使用字符串的拼接
因为，我们正常设置的时候是这样设置背景图片的

background-image: url("../image/a.jpeg");

所以我们在scrip获取到backgroundImage以后也要用同样的赋值方式

设置背景图片自动切换

只需要在上面的script里面添加这一行就可以啦

setInterval("qiehuan()",2000);

这里采用了setInterval这个计时器

周期性定时器

setInterval(function,time)

每过time的时间就会执行function中的事情

停止计时器

clearInterval(id)

需要获取传来的周期性定时器，然后停止这个定时器

使用周期性定时器，就可以实现网页自动切换背景图片的操作啦！！