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

前言

成品如下，可访问 http://www.violentayang.site/ViolentAyangMusic/ 预览，只实现了PC端，手机端访问页面会乱

实现功能

页面布局仅由横幅和音乐播放器盒子组成

点击每个音乐图标，可实现播放音乐，切换背景，图片旋转等功能

实现思路

1. 获取li的index()
2. 更换背景图片
3. 更换播放器图片、文本
4. 更换播放器按钮及title为暂停
5. 图片旋转
6. 播放歌曲

其他：

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;
    }
})

部署上线

1. 通过gitpages部署静态网页
   
   选中master，然后save
2. 域名绑定

在dns解析中添加两条数据

记录值填写你们自己的GitHub地址

资源获取

通过GitHub获取 https://github.com/ViolentAyang/ViolentAyangMusic
如果被墙住无法访问GitHub的朋友，可以在我的CSDN主页，点击联系我