jquery 音乐播放器效果插件 jPlayer源码
本文章收藏了一款超漂亮的jquery 音乐播放器效果插件哦，利用了jquery的音乐播放器插件做起在线音乐播放功能实在是方便了n多哦，下面来看看代码吧。
<!doctype html public '-//w3c//dtd xhtml 1.0 transitional//en' 'http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
<title>jquery 音乐播放器效果插件 jplayer</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<link href="skin/css教程reset.css" rel="stylesheet" type="text/css" />
<link href="skin/default/css/default.css" rel="stylesheet" type="text/css" />
<!--[if lt ie 7]>
<style type="text/css">
.playlist_content_songer .imgdiv a span { behavior: url(skin/default/css/iepngfix.htc); cursor: pointer; }
#player_play{behavior: url(skin/default/css/iepngfix.htc); }
#player_pause{behavior: url(skin/default/css/iepngfix.htc); }
</style>
<![endif]-->
<script type="text/网页特效" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div id="container">
<div id="jquery_jplayer"></div>
<div id="player_title">
<h1>music box</h1>
</div>
<div id="playlist_list">
<div class="playlist_main">
<div class="playlist_wrap" >
<div class="playlist_cc">
<ul class="playlist_content" >
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/01.mp3" songer="歌手" ablum="" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="歌手" ablum="麦" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑3" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p>sorry</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/preview2.mp3" songer="棉花" ablum="专辑4" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p>tihe</p>
</li><li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/01.mp3" songer="歌手" ablum="专辑5" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="she" ablum="专辑6" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p></p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑7" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/preview2.mp3" songer="不知道2" ablum="专辑8" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑9" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p>last friends</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="歌手" ablum="专辑10" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/01.mp3" songer="歌手" ablum="幸福的" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="歌手" ablum="麦" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑3" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p>sorry</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/preview2.mp3" songer="棉花" ablum="专辑4" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p>tihe</p>
</li><li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/01.mp3" songer="不知道1" ablum="专辑5" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="she" ablum="专辑6" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p></p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑7" songimg="skin/default/images/songer/1.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/preview2.mp3" songer="不知道2" ablum="专辑8" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑9" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p>last friends</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="歌手" ablum="专辑10" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/preview2.mp3" songer="不知道2" ablum="专辑8" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/03.mp3" songer="歌手" ablum="专辑9" songimg="skin/default/images/songer/3.jpg">
<a href="#" class="controllink" ></a>
<p>last friends</p>
</li>
<li class="player" jplayer="http://www.zzzyk.com/jplayer/mp3/02.mp3" songer="歌手" ablum="专辑10" songimg="skin/default/images/songer/2.jpg">
<a href="#" class="controllink" ></a>
<p>示例歌曲</p>
</li>
</ul>
</div>
</div>
</div>
<div class="playlist_footer_content">
<ul class="playlist_footer">
<li class="list_play_zhi"><a href="#">直接播放</a></li>
<li class="list_up_one"><a href="#">上一首</a></li>
<li class="list_up" style="display:none;"><a href="#">上 翻</a></li>
<li class="list_down" style="display:none;"><a href="#">下 翻</a></li>
<li class="list_down_one"><a href="#">下一首</a></li>
<li class="list_ramdom"><a href="#">随便听听</a></li>
<li class="list_power"><a href="http://www.zzzyk.com">power by zzzyk.com</a></li>
</ul>
</div>
</div>
</div>
<p style="text-align:right;width:300px;margin:0 auto;">dev by <a href="http://www.zzzyk.com" >zzzyk.com</a></p>
</body>
</html>
补充：网页制作,jquery 
