关于用js改变背景图片的问题(包含背景音乐)JQ也行,什么都行,请朋友们帮忙看看能不能写出来

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于用js改变背景图片的问题(包含背景音乐)JQ也行,什么都行,请朋友们帮忙看看能不能写出来相关的知识,希望对你有一定的参考价值。

有两个背景音乐,两张动态的GIF图片,一张静态图片(就是原图)。点击页面“下一个”按钮时,换背景图片1,同时播放音乐1. 再点击下一个 换背景图片2同时播放背景音乐2,只要两个,循环就行了。刷新页面的时候默认显示静态图片,音乐不播放。

<!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>追问

这一段是这么改吗??(图片地址和歌曲地址)图片和歌曲都是放在桌面的

,放入图片和歌曲点击下一个按钮没反应,你有QQ吗,可以加下问吗



追答

恩,和html文件放在一个文件夹里就OK了。你下载附件看一下

追问

还真是浏览器的原因,谷歌和360可以听到音乐,IE和火狐不可以,这段代码有兼容性问题~~大神能帮改下吗?谢啦!

参考技术A <EMBED src="music1url" autostart="true" loop="true" width="80" height="20">
<IMG ID="imgID" src="img1url">
<input id="click0" />
$("#click0").click(function()
$("embed")[0].src=='music1url'? $("embed")[0].src='music2url':$("embed")[0].src='music1url';//音乐进行切换。

$("#imgID")[0].src=='img1url'? $("#imgID")[0].src=='img2url':$("#imgID")[0].src=='img1url';//图片进行切换

有十个div,怎样实现选中其中一个,改变其背景色,另外九个不变,当选中另一个时又改变另一个的背景色

这个是jq写的,可以自己下载一个js库,配上这个就可以了,里面的div可以用class控制,比如你10个div class为a1 也就是<div class="a1"></div>*10
那div的地方要替换成.a1
$(document).ready(function(){
$(".a1").click(function(){
$(".a1").css({"background":none});//设置所有div无背景色

$(this).css({"background":"#ff0000"});//设置当前点击div背景色为红色,色号#ff0000

});

});

效果如下图

技术分享

 











以上是关于关于用js改变背景图片的问题(包含背景音乐)JQ也行,什么都行,请朋友们帮忙看看能不能写出来的主要内容,如果未能解决你的问题,请参考以下文章

关于jq一些基本监听事件

关于通过jq /js 实现验证单选框 复选框是否都有被选中

用js实现背景颜色改变

用JS去设置HTML页面鼠标悬浮时改变背景图片

CSS样式和JS样式改变字体颜色背景有啥不同?

jq获取当前浏览器大小怎么赋值给div使改变大小