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

如何设置背景图片通过点击按钮来触发“切换背景图片”这个命令==重点==如何在script里面改变网页的背景图片设置背景图片自动切换==周期性定时器====停止计时器==

如何设置背景图片

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

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

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