js实现音乐播放器中点击歌名切歌

JavaScript013

js实现音乐播放器中点击歌名切歌,第1张

1、支持循环、随机播放

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>