音乐盒（前端练手项目 html css js）

                                         大家好我是言不及行yyds

前言
你需要引入五个自己喜欢的图片和五个音乐

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的CSDN博客
🎁系列专栏：【前端练手项目】
🌱每日一句：
“人生的道路都是由心来描绘的。所以，无论自己处于多么严酷的境遇之中，心头都不应为悲观的思想所萦绕。”——稻盛和夫

1.展示

音乐盒（前端练手项目）

2.代码

html代码

<div class="banner">
        <ul>    
            <li class="m1" datasrc="音乐盒素材/1.mp3" title="不如-晨冰">
                <img src="音乐盒素材/1.jpg" width="100px">
            </li>
            <li class="m2" datasrc="音乐盒素材/2.mp3" title="你走-晨冰">
                <img src="音乐盒素材/2.jpg" width="100px">
            </li>
            <li class="m3" datasrc="音乐盒素材/3.mp3" title="哪里都是你-晨冰">
                <img src="音乐盒素材/3.jpg" width="100px">
            </li>
            <li class="m4" datasrc="音乐盒素材/4.mp3" title="热爱105c的你-晨冰">
                <img src="音乐盒素材/4.jpg" width="100px">
            </li>
            <li class="m5" datasrc="音乐盒素材/5.mp3" title="海底-晨冰">
                <img src="音乐盒素材/5.jpg" width="100px">
            </li>
        </ul>
    </div>
    <div class="music">
        <div class="m_img">
            <img src="音乐盒素材/1.jpg" width="100px">
        </div>
        <div class="m_text">不如-晨冰</div>
        <div class="m_btn">
            <a href="#" class="m_prev" title="上一首"></a>
            <a href="#" class="m_play" title="播放"></a>
            <a href="#" class="m_next" title="下一首"></a>
        </div>
        <div class="m_close">
        </div>
        <audio src="音乐盒素材/1.mp3" class="m_mp3"></audio>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="音乐盒.js"></script>

css代码

body{
    background:url("./音乐盒素材/1.jpeg") no-repeat;
    background-size: cover;

}
.banner{
    background: url("./音乐盒素材/9.jpg") no-repeat;
    width:960px;
    height:300px;
    margin:80px;
    opacity: 0.8;
    box-shadow: 10px 15px 15px 1px #d8dea0;
    position: relative;
}
.banner ul li{
    list-style:none;
    display:inline-block;
    position:absolute;
}
.banner ul li img{
    border-radius:50%;
    cursor:pointer;
}
.m1{top:20px;left:60px}
.m2{top:60px;left:200px}
.m3{top:100px;left:400px}
.m4{top:80px;left:600px}
.m5{top:50px;left:800px}
@keyframes img_rotate {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
.banner .img_rotate{
    animation: img_rotate 2s infinite linear;
}
.music{
    width:650px;
    height:120px;
    position:fixed;
    left:0;
    bottom:150px;
    background-color: black;
    opacity:0.8;
    box-shadow: 10px 15px 15px 1px black;
}
.music .m_img{
    margin-top:5px;
    margin-left:10px;
    float:left;
}
.music .m_text{
    float:left;
    color:white;
    font-size:20px;
    font-weight:bold;
    margin-top:40px;
    margin-left:20px;
}
.music .m_btn{
    float:left;
    position:absolute;
    left:300px;
}
.music .m_btn a{
    float:left;
    width:60px;
    height:60px;
    background: url("./音乐盒素材/play.png");
    margin-top:30px;
    margin-left:20px;

}
.music .m_btn .m_prev{
    background-position: -103px -20px;
}
.music .m_btn .m_play{
    background-position: -17px -22px;
}
.music .m_btn .m_next{
    background-position: -189px -20px;
}

.music  .m_close{
    float:right;
    width:25px;
    height:120px;
    margin-top:2px;
    cursor: pointer;
    background-color:burlywood;
    opacity:0.7;

}
.music .m-btn .m_pause{
    background-position:-102px -182px;
}
/*
编写js时隐藏或显示播放器时编写的代码
*/

js代码

/*分析：
     1.获取li的Index()
     2.更换背景图片 
     3.更换播放器图片盒文本
     4.播放按钮及title更换为暂停
     5.图片旋转
     6.播放音乐
     其他：
     1.暂停/播放
     2.上一首/下一首
     3.播放器的显示与隐藏
*/
//收集数剧
var index=0;
var li=$(".banner ul li");
var img=$(".music .m_img img");
var text=$(".music .m_text");
var prev=$(".music .m_btn .m_prev");
var play=$(".music .m_btn .m_play");
var next=$(".music .m_btn .m_next");
var mp3=$(".music .m_mp3");
var flag=false;//歌曲是否播放
var close=true;//播放器是否显示
//获取点击的li索引
li.click(function(){
    //获取当前索引
    index=$(this).index();
  show();
});
//封装一个函数 方便上一首/下一首
function show(){
    //更换背景图片 需要+1，图片第一张索引为0
    change_bg(index+1);//更换背景图片
    change_img_text(index+1);//更换播放器图片盒文本
    change_btn_title()
    img_rotate()
    play_mp3()
};
function change_bg(idx){
    $("body").css({
        "background":"url(./音乐盒素材/"+idx+".jpg) no-repeat",
        "background-size":"cover"
    });

}
function change_img_text(idx){
    img.attr("src","./音乐盒素材/"+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","暂停");
}
function img_rotate(){
    li.children().removeClass("img_rotate");
    li.eq(index).children().addClass("img_rotate");
}
function play_mp3(){
    mp3.attr("src",li.eq(index).attr("datasrc"));
    mp3.get(0).play();//播放歌曲
    //修改歌曲是否播放
    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("tilte","播放")//涨停按钮转换，title更换
    }else{
        mp3.get(0).play();
        li.eq(index).children().addClass("img_rotate");
        play.removeClass("m_play").addClass("m_pause").attr("tilte","暂停")//涨停按钮转换，title更换
        flag=true;
        change_bg(index+1);
    }
})
//上一首
prev.click(function(){
    index--;
    if(index<0){
        index=li.length-1;
    }
    show();
})
//下一首
next.click(function(){
    index++;
    if(li.length-1<index){
        index=0;
    }
    show();
})
//隐藏/显示
$("m_close").click(function(){
    if(close){
        $(".music").animate({"left":"550px"},800);
        close=false;
    }else{
        $(this).removeClass("m_open");
        $(".music").animate({"left":"opx"},800);
        close=true;
    }
})
imate({"left":"550px"},800);
        close=false;
    }else{
        $(this).removeClass("m_open");
        $(".music").animate({"left":"opx"},800);
        close=true;
    }
})

总结：
1.搭建静态页面
2.绑定事件，点击切换按钮
3.点击事件，点击换音乐和图片
4.实时更换背景图片

                    本期就结束了，如果对您有帮助，点赞+评论支持一下博主再走吧
                    还没有关注言不及行yyds的朋友，点个关注每天学一点前端知识