html中怎样定时变换背景图片

发布网友发布时间：2022-04-24 12:22

共3个回答

懂视网时间：2022-04-20 14:42

这篇文章介绍的内容是关于HTML 实现背景图片的替换，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

<p class="p"> 
 <p class="p2"><img src="../img/hu.jpg" alt="" id="picture"></p>
 </p>
</p>

var curIndex = 0;
var timeInterval = 3000; //切换时间 3秒 可以修改
var arr = new Array();
arr[0] = "../img/hu.jpg"; //这里的是图片存放的相对路径
arr[1] = "../img/bb.jpg";
arr[2] = "../img/cc.jpg";
setInterval(changeImg, timeInterval);

function changeImg() {
var obj = document.getElementById("picture");
if(curIndex == arr.length - 1) {
curIndex = 0;
} else {
curIndex += 1;
}
obj.src = arr[curIndex];
}

相关推荐：

HTML实现美化上传文件样式

怎样用HTML实现滚动弹幕功能

HTML实现抢票功能(设定时间打开抢票的页面)

热心网友时间：2022-04-20 11:50

一般是用脚本实现。

示例：
<!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)';追问为什么还是只有一张图片？？？

热心网友时间：2022-04-20 13:08

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页面时同样点击该页面的右上角的关闭按钮即可
就像正常的网页一样操作就好