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

html中怎样定时变换背景图片,第1张

一般是用脚本实现。

示例:

<!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>Document</title>

<script type="text/javascript">

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>

<img id="img1" src="img/1.jpg" width="288">

</body>

</html>

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


欢迎分享,转载请注明来源:内存溢出

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存