一款简约强大的HTML5音乐播放器jQuery插件QPlayer,适合PC端和移动端,歌曲别表可以随意添加,点击音乐封面可以切换随机播放或顺序播放,点击拖动歌曲名可以快进快退。
头部引入CSS样式文件player.css:
<link type="text/css" rel="stylesheet" href="css/player.css">
body部分写好指定ID的容器存放播放器界面、歌曲列表等,代码如下:
<div id="QPlayer">
<div id="pContent">
<div id="player">
<span class="cover"></span>
<div class="ctrl">
<div class="musicTag marquee">
<strong>歌名</strong>
<span> - </span>
<span class="artist">歌手</span>
</div>
<div class="progress">
<div class="timer left">0:00</div>
<div class="contr">
<div class="rewind icon"></div>
<div class="playback icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="right">
<div class="liebiao icon"></div>
</div>
</div>
</div>
</div>
<div class="ssBtn">
<div class="adf"></div>
</div>
</div>
<ol id="playlist"></ol>
</div>
接着引如javascript插件和,写播放列表数组等,部分代码如下:
function bgChange(){
var lis= $('.lib');
for(var i=0; i<lis.length; i+=2)
lis[i].style.background = 'rgba(246, 246, 246, 0.5)';
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791