如何设置背景图片

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

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

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

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

html语言设置网页背景,HTML+CSS入门设置网页中的背景图片的5个属性
本篇教程介绍了HTML+CSS入门设置网页中的背景图片的5个属性,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 在css代码中设置背景图片的方法,包括背景图片.背景重复 ...
html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
利用wget 抓取网站网页包括css背景图片
利用wget 抓取网站网页包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...
自动切换背景的登录页面
自动切换背景的登录页面有趣的小案例池子: JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换背景 ...
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
js 点击切换背景图片
您好,要使用JavaScript实现点击切换背景图片,可以按照以下步骤进行: 在HTML中,为需要切换背景图片的元素添加一个id属性,比如id="bg-img". 在JavaScr ...
前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...
html怎么设置网页自动登录,如何让网页记住密码？设置让网页记住密码的方法...
电脑登录某些网页后台要输入密码,如果一遍又一遍地输入密码总感觉很累,其实,我们可以设置网页自动记住密码,实现快速登陆.针对不同的浏览器,我们需要进行类似的设置操作,因此,本文小编和大家诉说一下让网页记 ...
vue动态设置style属性修改背景图片
原始class属性设置背景样式 .bannerP {position: absolute;top: 0;left: 2.96rem;right: 0;bottom: 0;background: url ...

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

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