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

var curIndex=0

//时间间隔(单位毫秒)，每秒钟显示一张，数组共有5张图片放在Photos文件夹下。

var timeInterval=1000

var arr=new Array()

arr[0]="photos/1.jpg"

arr[1]="photos/2.jpg"

arr[2]="photos/3.jpg"

arr[3]="photos/4.jpg"

arr[4]="photos/5.jpg"

setInterval(changeImg,timeInterval)

function changeImg()

{

var obj=document.getElementById("obj")

if (curIndex==arr.length-1)

{

curIndex=0

}

else

{

curIndex+=1

}

obj.src=arr[curIndex]

}

</script>

自己修改一下就可以用了

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

window.onload=function(){

var oImg=document.getElementById('img1')

var arrImgUrl=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg"]

var num=0

function Tab(){

num++

if(num>arrImgUrl.length-1){

num=0

}

oImg.src=arrImgUrl[num]

}

setInterval(Tab,1000)

}

</script>

</head>

<body>

</body>

</html>

注意图片放在名称为 img 的文件夹中，而且是格式的，否则需要修改html

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6108938.html

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

发表评论

评论列表（0条）