JQuery实现简易音乐播放器

      自学前端有一阵子了，之前一直都是跟着教学视频来写一些小例子，实现页面效果和功能，这次下定决心开始自己设计并实现一个网页版的音乐播放器，来巩固之前所学的html，css ，js，JQuery等知识。

在网上参考了QQ音乐，网易云音乐的界面设计和功能实现，决定界面风格以灰色为主，显得逼格高一点点。主要的播放等功能则借鉴了网易云音乐。

主要页面布局

1.导航栏 2.轮播图 3.音乐播放列表 4.音乐播放控制栏

主要实现功能

1.音乐的播放/暂停

2.上一曲/下一曲

3.音乐列表中歌曲切换

4.进度条拖动播放

5.轮播图切换图片

音乐播放器的界面如下图所示：

首先是用html标签写界面了，设置四个div块，每个div块中的子元素基本都是ul无序列表或者是div块，要说的没有什么了。

接下来是写css样式，看着界面好像不复杂，但是写样式的时候中间还是碰到了一些问题，所以平时也不能小看css。

需要注意的是轮播图的div，postion属性需要设置为relative，每个图片放在li标签中，设置为float：left就可以了。而想准确定位两个向左翻页和向右翻页的箭头位置则需要绝对定位 postion：absolute。因为设置top，left属性只有在绝对定位的情况下才有效，所以这一点需要注意一下。同理，下面的控制播放的div块中也是遵从“父相子绝”的规则，通过绝对定位来准确定位。<