html中怎样定时变换背景图片
展开全部
一般是用脚本实现。
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#bg_body{
background:url(1.jpg) no-repeat center #eee;
background-attachment:fixed;
height:1000px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(2.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};
</script>
</head>
<body id="bg_body">
</body>
</html>
你背景图片就设置了一个2.jpg再切换也是这一张图片啊
如果有多张图片比如说1-10.jpg，那就把oS.backgroundImage='url(2.jpg)';改为oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)';
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#bg_body{
background:url(1.jpg) no-repeat center #eee;
background-attachment:fixed;
height:1000px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(2.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};
</script>
</head>
<body id="bg_body">
</body>
</html>
你背景图片就设置了一个2.jpg再切换也是这一张图片啊
如果有多张图片比如说1-10.jpg，那就把oS.backgroundImage='url(2.jpg)';改为oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)';
追问
为什么还是只有一张图片？？？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1.准备相关图片(1.jpg,2.jpg...n.jgp)
2.编写一个html页面 用以显示图片
并设置为自动定时更新图片
3.将改html页面 设置为桌面背景
该“桌面”隔定时自动刷新 更新图片显示
===============================================
1.将自己需要的图片 如英语小卡片 名人名言等
集结在一个文件夹下 并进行命名 如1.jpg,2.jpg...
这样在最后的桌面上 就可以学习英语或名言了
2.编写如下示例的html页面 放在该图片文件夹中
假设该html页面 名称为myPicDesktop.html
其中之所以设置td的宽度为50%
是想控件图片的显示位置在桌面的右半部
因为通常桌面的左半部都有很多图标
示例代码如下:
<html>
<head>
</head>
<script language="javascript">
window.onload=refleshDesktopPic
function refleshDesktopPic()
{
var i = 1;
var j = 0; //图片的顺序号
var k = 8; //图片的张数
var m = 30*1000; //每张显示的时间 毫秒
var n = 2; //循环遍数
//
while(i<=(n*k))
{
j= i%k;//应该循环第几张图片以显示
if(j==0)
j=k;//最后一张图片的序号
//隔一短时间后 再替换为另一张图片
setTimeout("setPic("+j+")",(m*i) );
i = i+1;
}
}
function setPic(picSeqNum)
{
document.all.myDiv.innerHTML = "<image id='image2' src='"+picSeqNum+".jpg'></image>";
}
</script>
<body>
<table width="100%">
<tr>
<td width="50%">
</td>
<td>
<div id="myDiv">
<image id="image1" src="1.jpg"></image>
</div>
</td>
</tr>
</table>
</body>
</html>
3.以Win2003系统为例
桌面->右键->属性->桌面标签页
->自定义桌面->打开“桌面项目”设置框
->Web标签页
->点击 新建 按钮
->打开 “新建桌面项目”设置框
->点击 浏览 按钮
->找到 第2步所编辑的myPicDesktop.html
->确定 ->应用 ->确定
可以查看效果
起初 该html页面做为桌面 并没有最大化展开
而是 缩小的显示在桌面的右中部
可以鼠标放上去 在页面的右上角 点击最大化按钮
以使html页面有桌面那么大显示
当想关闭该html页面时 同样点击该页面的右上角的关闭按钮即可
就像正常的网页一样操作就好
2.编写一个html页面 用以显示图片
并设置为自动定时更新图片
3.将改html页面 设置为桌面背景
该“桌面”隔定时自动刷新 更新图片显示
===============================================
1.将自己需要的图片 如英语小卡片 名人名言等
集结在一个文件夹下 并进行命名 如1.jpg,2.jpg...
这样在最后的桌面上 就可以学习英语或名言了
2.编写如下示例的html页面 放在该图片文件夹中
假设该html页面 名称为myPicDesktop.html
其中之所以设置td的宽度为50%
是想控件图片的显示位置在桌面的右半部
因为通常桌面的左半部都有很多图标
示例代码如下:
<html>
<head>
</head>
<script language="javascript">
window.onload=refleshDesktopPic
function refleshDesktopPic()
{
var i = 1;
var j = 0; //图片的顺序号
var k = 8; //图片的张数
var m = 30*1000; //每张显示的时间 毫秒
var n = 2; //循环遍数
//
while(i<=(n*k))
{
j= i%k;//应该循环第几张图片以显示
if(j==0)
j=k;//最后一张图片的序号
//隔一短时间后 再替换为另一张图片
setTimeout("setPic("+j+")",(m*i) );
i = i+1;
}
}
function setPic(picSeqNum)
{
document.all.myDiv.innerHTML = "<image id='image2' src='"+picSeqNum+".jpg'></image>";
}
</script>
<body>
<table width="100%">
<tr>
<td width="50%">
</td>
<td>
<div id="myDiv">
<image id="image1" src="1.jpg"></image>
</div>
</td>
</tr>
</table>
</body>
</html>
3.以Win2003系统为例
桌面->右键->属性->桌面标签页
->自定义桌面->打开“桌面项目”设置框
->Web标签页
->点击 新建 按钮
->打开 “新建桌面项目”设置框
->点击 浏览 按钮
->找到 第2步所编辑的myPicDesktop.html
->确定 ->应用 ->确定
可以查看效果
起初 该html页面做为桌面 并没有最大化展开
而是 缩小的显示在桌面的右中部
可以鼠标放上去 在页面的右上角 点击最大化按钮
以使html页面有桌面那么大显示
当想关闭该html页面时 同样点击该页面的右上角的关闭按钮即可
就像正常的网页一样操作就好
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
