素材牛VIP会员

jQuery多功能黑色音乐播放器

 所属分类:网页特效-音乐视频

 浏览:1602次  评论:0次  更新时间:2016-10-31
牛币素材VIP可免积分下载
jQuery多功能黑色音乐播放器兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery多功能黑色音乐播放器,含播放列表,播放按钮,音量控制,音乐下载按钮等

详细介绍

使用方法:

引入CSS样式文件

<link rel="stylesheet" href="css/sucainiu.css" type="text/css" />

引入jQuery库文件、音乐列表配置文件、插件JS文件

将要播放的歌曲信息添加到js/data.js文件里,格式为:DATA("歌名","地址","ID");

<script language="javascript" type="text/javascript" src="js/f.js"></script> 
  <script language="javascript" type="text/javascript" src="js/data.js"></script> 
  <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script> 
  <script language="javascript" type="text/javascript" src="js/jquery.jplayer.min.js"></script> 
  <script language="javascript" type="text/javascript" src="js/main.js"></script> 

HTML结构

<div id="player"></div>
  <div class="player">
    <div class="player-l bg"></div>
    <div class="player-block bg">
      <div class="playlist"> <span>
        <p class="bg"></p>
        列表</span>
        <select class="selectobj" id="list">
        </select>
        <div class="select"></div>
      </div>
      <div class="seprator bg"></div>
      <div class="controls"> <a href="#" class="pre mode-bg" title="上一曲"></a> <a href="#" class="play mode-bg" title="播放" style="display:none"></a> <a href="#" class="pause mode-bg" title="暂停"></a> <a href="#" class="next mode-bg" title="下一曲"></a> <span style="float:left; margin-left:5px; margin-right:3px; display:inline;"> <a href="#" class="random-mode random-mode-select mode-bg"  title="随机播放"></a> <a href="#" class="order-mode mode-bg"  title="列表循环"></a> <a href="#" class="single-mode mode-bg"  title="单曲循环"></a> </span> <a href="#" class="download bg" id="download" title="下载舞曲">下载</a> </div>
      <div class="seprator bg"></div>
      <div class="info">
        <div class="song-name">jq22</div>
        <div class="time" id="playtime">00:00</div>
        <div class="s" >/</div>
        <div class="time" id="totaltime">00:00</div>
        <div class="tracks bg">
          <div class="download-bar bg">
            <div class="l bg">l</div>
            <div class="r bg">r</div>
          </div>
          <div class="seek-bar bg">
            <div class="l bg"></div>
            <div class="r bg"></div>
            <div class="point bg"></div>
          </div>
        </div>
      </div>
      <div class="seprator bg"></div>
      <div class="volumn"> <a class="mute mode-bg"></a> <a class="unmute mode-bg"></a>
        <div class="line bg">
          <div class="tracks" id="volumn">
            <div class="volumn-bar bg">
              <div class="l bg"></div>
              <div class="r bg"></div>
              <div class="point bg"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="player-r bg"></div>
  </div>

相关素材 - 音乐视频

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)