zoukankan      html  css  js  c++  java
  • 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>

    整体下载:点击下载

    下载后本地打开即可

    如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

     

  • 相关阅读:
    D
    洛谷P2002 消息扩散
    洛谷P5058 [ZJOI2004]嗅探器
    洛谷P2746 校园网Network of Schools
    洛谷P3388 【模板】割点(割顶)
    洛谷P1407 [国家集训队]稳定婚姻
    2018年12月18日
    洛谷P1547 Out of Hay
    洛谷P4018 Roy&October之取石子
    洛谷P1318 积水面积
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/15387016.html
Copyright © 2011-2022 走看看