点击右边的问题，跳转到问题列表页面。如果你想跳到相应的位置，它会变成蓝色。js如何实现？

主页

主页面是对其他网页音乐播放器的模仿，效果如图:？

上面有导航栏可以切换到其他功能页面，下面有页脚。点击它，切换到播放界面。

播放页面？

实现了播放模式(单循环、随机播放、循环播放)、上一首、下一首、播放/暂停以及音乐播放列表的呈现。

搜索页面

搜索歌曲获得相应的歌单，点击开始播放。

实现

音乐播放的功能主要依靠H5标签。它具有以下更重要的属性:

Src:用于播放的音频源；？

自动播放:“自动播放”定义自动播放；？

loop:“loop”定义循环播放；？

控件:“控件”显示播放控件。

另外，音频还有很多事件属性，可以用来实现音乐播放器播放音频的交互效果。比如:？

媒体事件包括oncanplay事件、onended事件、onpause和onplay事件等。详情请参考W3C上的文档。

主界面的实现？

主要使用隐藏音频标签；？

监控窗口下的mousemove事件，通过鼠标的移动设置导航栏的显示，监控导航栏中的mouseleave事件设置导航栏的隐藏；？

封装图片传送带的插件；？

播放列表的实现(有些音乐最初存储在数组中)；？

页脚布局实现。

有两个主要的东西需要详细描述:轮播插件和播放列表的实现。？

JQuery插件大多是用下面的模板写的:？

如果是全局插件。

；(函数($){

$.扩展({

函数名:function(){

//一些处理操作

}//这是一个全局插件，即可以通过jQeury直接调用。函数名。

});

})(jQuery)

如果是对象插件:

；(函数($){

$.fn.extend({

函数名:function(){

//函数实现体

}

});？//顾名思义，对象插件就是特定对象调用的方法})(jQuery)

所以，首先实现了在页面中显示轮播的效果:？

主旨:每隔一段时间改变画面的透明度，改变画面上层黑点和白点的效果；

var Url = " MusicPlayerImg/"；var LunboArr = ["Music.jpg "，" music3。PNG "，" music2。PNG "，" music4。PNG "，" music5。PNG "，" music6。PNG "]；var I = 0；

$("#trueImg ")。fadeTo(1000，0.2)；

setInterval(function(){

$("#trueImg ")。fadeTo(1000，1)；

$("#circles img ")。每个(函数(索引，el) {

$(这个)。attr ('src '，' music player img/黑点。png’)；？

});

$("#trueImg ")。attr('src '，Url+LunboArr[(I+1)% 6])；var selector = " # circles img:eq("+((I+1)% 6)+")"；

$(选择器)。attr ('src '，' music player img/白点。png’)；？

i++；

$("#trueImg ")。fadeTo(1000，0.2)；

}, 2000);

然后将其封装到一个div对象插件中:

；(函数($){

$.fn.extend({

lunbo: function(){

var Url = " MusicPlayerImg/"；var LunboArr = ["Music.jpg "，" music3。PNG "，" music2。PNG "，" music4。PNG "，" music5。PNG "，" music6。PNG "]；var I = 0；

$("#trueImg ")。fadeTo(1000，0.2)；

setInterval(function(){

$("#trueImg ")。fadeTo(1000，1)；

$("#circles img ")。每个(函数(索引，el) {

$(这个)。attr ('src '，' music player img/黑点。png’)；？

});

$("#trueImg ")。attr('src '，Url+LunboArr[(I+1)% 6])；var selector = " # circles img:eq("+((I+1)% 6)+")"；

$(选择器)。attr ('src '，' music player img/白点。png’)；？

i++；

$("#trueImg ")。fadeTo(1000，0.2)；

}, 2000);

}

});？

})(jQuery)