关于如何设置网页自动切换背景图片 |
您所在的位置：网站首页 › html中网页背景图片怎么设置的 › 关于如何设置网页自动切换背景图片 |
关于如何设置网页自动切换背景图片
|
这篇文章关于如何设置网页自动切换背景图片
如何设置背景图片通过点击按钮来触发“切换背景图片”这个命令==重点==如何在script里面改变网页的背景图片
设置背景图片自动切换==周期性定时器====停止计时器==
如何设置背景图片
body{
background-image: url("../image/a.jpeg");
}
这里的 background-image: url("../image/a.jpeg");就是用来设置网页背景图片的。 通过点击按钮来触发“切换背景图片”这个命令部分源代码 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里面的 qiehuan() 方法，然后实现切换背景图片的 重点 如何在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)需要获取传来的周期性定时器，然后停止这个定时器 使用周期性定时器，就可以实现网页自动切换背景图片的操作啦！！
|
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |