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

1.展示

音乐盒（前端练手项目）

2.代码

<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>

<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>

/*分析：
     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;
    }
})