JSJquery，如何实现背景图片的更换

JavaScript012

JSJquery，如何实现背景图片的更换,第1张

更换背景图片有两种方式：

1、直接给元素附加css，因为js附加的css样式要比css中的样式权限高，那么js设置的背景图片就会覆盖之前的图片

$(this).css("background","url(1.jpg) no-repeat 0 0")

2、写两个class，一个class里面写一个背景图片，js中操作的话直接改变元素的class就可以了

$(this).removeClass('classA').addClass('classB')

相对而言，第二种方式更好一点，实现了js中尽量不书写css的理念，同时第二种可以实现背景图片不断替换，而第一种不行

每两秒产生一个随机数 并且判断这个随机数是否大于0.5 如果大于0.5 将i的值复制为1 如果小于0.5 将I的值赋值为0 下面就将body的背景图设置是bgimg1还是bgimg0

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

body { background-image: url(bg.jpg) }

</style>

</head>

<body>

<input id="bnt1" type="button" value="下一个">

<audio src="" autoplay="autoplay"></audio>

<script type="text/javascript" >

var oBtn=document.getElementById('bnt1')

var audio = document.getElementsByTagName('audio')[0]

var body = document.getElementsByTagName('body')[0]

var i=0

var j=0

var bg=new Array('bj1.gif','bj2.gif')//背景图片地址

var music=new Array('xusong.mp3','ytian.mp3')//歌曲地址

oBtn.onclick=function()

{

bj()

Music()

}

function bj()

{

i++

if(i>bg.length-1)

{

i=0

}

body.style.backgroundImage="url("+bg[i]+ ")"

}

function Music(){

j++

if(j>music.length-1)

{

j=0

}

audio.src = music[j]

}

</script>

</body>

</html>