最新最好听的阅读背景音乐推荐試听 更新日期：

九酷音乐不仅收集了阅读背景音乐,还包括互联网上的流行中文歌曲,日韩歌曲,还有英文歌曲共20W首供网友免费在线试听和下載.

我们的第一个H5应用经过与的制作已经越来越惊艳了，这一次我们继续来给她梳妆打扮，让她更漂亮

1、加入页面加载完成前的loading动画，提升用户体验；
2、加入背景喑乐自动播放，并添加控制图标可以控制播放与暂停
3、让页面实现自动切换。

 

 


 

 
 


 

 我们让它在页面加载完成之后就自动隐藏并且让下面的箭头在页面完成加载后再出现：
 


 

 


 

 

 
 

 好了，loading动画就处理好了
 
 

 

 我们先要准备好背景音乐的素材，最好是纯音樂的并且经过剪切的，因为是移动端既要考虑流量问题，也要考虑到我们整个应用的时长并且充分利用循环播放的特性。
 
 

 由于移动端浏览器基本上都是支持H5的而我们做的也是基于H5的应用，所以我们直接采用H5的标签来在页面中插入音乐
 
 

 
 

 

 再次刷新浏览器，便可听到我們插入的悦耳的音乐了
 


 

 现在，我们加入控制图标并在myfn.js里编写控制播放与暂停的功能
 


 

 我们准备两张png格式的图片，分别在音乐播放与暂停時来显示如图：
 


 

 
 


 

 在页面中加入一个ID为audioPlay的div，负责显示图片：
 


 

 


 

 


 

 

 这样就实现了页面每四秒自动切换至下一页的功能
 
 

好了，这一次的改造相对來说比较简单V3.0版本就大功告成了。

 

 


 

 
 


 

 然后我对myfn.js进行改造将页面切换部分的代码封装为一个独立的功能函数，方便后面自动切换使用为叻避免与音乐控制按钮发生冲突，将页面切换监听事件绑定到.page之上改造后的myfn.js全部代码如下：
 


 

 


 
 

 

 再次刷新浏览器，初始状态下音乐自动播放并且控制按钮为亮色的，点击控制按钮后音乐暂停播放，图标变为暗色如下图：
 
 

 
 
 

 

 实现自动切换的原理其实就是一个典型的定时器功能，代码如下：