前言
成品如下,可访问 http://www.violentayang.site/ViolentAyangMusic/ 预览,只实现了PC端,手机端访问页面会乱
实现功能
页面布局仅由横幅和音乐播放器盒子组成
点击每个音乐图标,可实现播放音乐,切换背景,图片旋转等功能
实现思路
- 获取li的index()
- 更换背景图片
- 更换播放器图片、文本
- 更换播放器按钮及title为暂停
- 图片旋转
- 播放歌曲
其他:
1.暂停/播放
2.上一首/下一首
3.播放器可以显示和隐藏
关键代码
//更换背景
function change_bg(idx){
$("body").css({
"background": "url(img/" + idx + "_bg.jpg) no-repeat",
"background-size": "cover"
});
}
//更换播放器图片、文本
function change_img_text(idx){
img.attr("src","img/" + idx + ".jpg");//更换播放器图片
text.html(li.eq(index).attr("title"));//获取li的title属性然后替换文本
}
//更换播放按钮及title为暂停
function change_btn_title(){
play.removeClass("m_play");//移除原有的播放样式
play.addClass("m_pause");//添加新的暂停样式
play.attr("title","暂停");//更换title
}
//图片旋转
function img_rotate(){
//移除所有的img图片旋转样式
li.children().removeClass("img_rotate");
//给当前点击的li添加样式
li.eq(index).children().addClass("img_rotate");
}
//播放歌曲
function play_mp3(){
//获取我们选中的li的datasrc属性
mp3.attr("src",li.eq(index).attr("datasrc"));
mp3.get(0).play();//播放歌曲
//修改歌曲播放的标记 true播放 false暂停
flag = true;
}
//暂停或者歌曲
play.click(function(){
/*如果歌曲播放
1.暂停歌曲
2.图片停止旋转
3.暂停按钮更换为播放
4.title更换为播放
*/
if(flag){
mp3.get(0).pause();//暂停歌曲
li.eq(index).children().removeClass("img_rotate");//移除图片旋转
play.removeClass("m_pause").addClass("m_play").attr("title","播放");//暂停按钮更换为播放,title变换为播放
flag = false;
}else{
/*如果歌曲暂停
1.播放歌曲
2.图片旋转
3.播放按钮更换为暂停
4.title更换为暂停
*/
mp3.get(0).play();//播放歌曲
li.eq(index).children().addClass("img_rotate");//图片旋转
play.removeClass("m_play").addClass("m_pause").attr("title","暂停");//播放按钮更换为暂停,title变换为暂停
flag = true;
change_bg(index+1);//第一次进去时候切换背景
}
});
//上一首
prev.click(function(){
index--;
if(0>index){
index = li.length - 1;
}
//播放歌曲
show();
});
//下一首
next.click(function(){
index++;
if(index>li.length-1){
index = 0;
}
show();
})
//播放器隐藏与显示
$(".m_close").click(function(){
//如果显示则隐藏,添加样式
if(close){
$(this).addClass("m_open");
//添加向左移动样式,1秒完成
$(".music").animate({"left":"-475px"},800);
close = false;
}else{
//如果隐藏则显示,移除样式
$(this).removeClass("m_open");
//恢复初始值
$(".music").animate({"left":"0px"},800);
close = true;
}
})
部署上线
- 通过gitpages部署静态网页
选中master,然后save - 域名绑定
在dns解析中添加两条数据
记录值填写你们自己的GitHub地址
资源获取
通过GitHub获取 https://github/ViolentAyang/ViolentAyangMusic
如果被墙住无法访问GitHub的朋友,可以在我的CSDN主页,点击联系我
更多推荐
html+css+javascript制作爱尚音乐播放页面
发布评论