前言

成品如下，可访问 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.com/ViolentAyang/ViolentAyangMusic
如果被墙住无法访问GitHub的朋友，可以在我的CSDN主页，点击联系我

html+css+javascript制作爱尚音乐播放页面相关推荐

web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
HTML+CSS+JavaScript制作登录页面_科幻后台登录界面html模板_科技感登录界面html模板
科幻后台登录界面html模板原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :蓝色科技风格后台登录框,科幻的网站后 ...
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
HTML+CSS+JavaScript制作3D云效果，叼炸天！可用鼠标控制方向！
HTML+CSS+JavaScript制作3D云效果,叼炸天!可用鼠标控制方向! 作品介绍 1.网页作品简介方面 :3D云效果,叼炸天!可用鼠标控制方向! 2.网页作品编辑方面:此作品为学生个人主页网 ...
html制作在线视频音乐播放器,用html5制作音乐播放器，这3款就足够了！
用HTML5结合Jquery做一个简易版的音乐播放器代码展示: 三生草 var sum = 1; function ssss(a) { var s = document.getElementById ...
HTML+CSS+JavaScript 制作抖音超火圣诞树
HTML+CSS+JavaScript 制作抖音超火-圣诞树视频演示圣诞树代码效果图 HTML <body marginwidth="0" marginheight=& ...
HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤
❉ HTML+CSS+JavaScript❤制作浪漫气球520告白相册❤ 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享 ...
html音频从10秒播放至30秒,基于Arduino制作SD卡音乐播放器
一.项目介绍前面用ATtiny85制作SD卡音乐播放器,本次主要利用Arduino UNO 和SD卡制作音乐播放器.这个播放器不需要添加多余的模块,只需要SD读卡器和Arduino UNO开发板就可 ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

html+css+javascript制作爱尚音乐播放页面

前言