JQ实现音乐插件并自动播放
作者:互联网
这里分享我最近写出来的一个小东西,基于jq的音乐播放器,可以嵌套到网站
效果截图:
具体首页代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title></title> <link rel="stylesheet" href="css/player.css"> </head> <body> <div id="QPlayer"> <div id="pContent"> <div id="player"> <span class="cover"></span> <div class="ctrl"> <div class="musicTag marquee"> <strong>Title</strong> <span> - </span> <span class="artist">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" id="play-btn"></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> <script src="js/jquery.min.js"></script> <script src="js/jquery.marquee.min.js"></script> <script> var playlist = [ {title:"万象霜天",artist:"三无MarBlue",mp3:"music/万象霜天.mp3",cover:"music/万象霜天.png",} ]; var isRotate = true; var autoplay = true; </script> <script src="js/player.js"></script> <script> function bgChange(){ var lis= $('.lib'); for(var i=0; i<lis.length; i+=2) lis[i].style.background = 'rgba(246, 246, 246, 0.5)'; } window.onload = bgChange; setTimeout(()=>{ $("#play-btn").click() },2000) setTimeout(()=>{ $("#play-btn").click() },4000) </script> </body> </html>
整体下载:点击下载
下载后本地打开即可
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
标签:插件,JQ,mp3,万象,自动播放,var,btn,click,霜天 来源: https://www.cnblogs.com/smileZAZ/p/15387016.html