2、在播放的同时支持图片的旋转
3、支持点击进度条调整播放的位置,以及调整音量
4、显示音乐的播放时间
5、支持切歌:
<!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>
1、提前准备一组图片,将图片名称设置一定规律:例如 img1.jpg、img2.jpg
2、编写鼠标点击事件
3、在鼠标点击时间里,判断鼠标点击次数
4、根据不同次数,显示不同的图片
<script type="text/javascript">$(function(){
var items=new Arrays("img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg")
var i=0
$("#bgImage").click(function(){
i++
if(i>items.length){
i=1
}
$(this).prop("src","img"+i+".jpg")
})
})
</script>