大家好我是言不及行yyds
前言
你需要引入五个自己喜欢的图片和五个音乐
☀️作者简介:大家好我是言不及行yyds
🐋个人主页:言不及行yyds的CSDN博客
🎁系列专栏:【前端练手项目】
🌱每日一句:
“人生的道路都是由心来描绘的。所以,无论自己处于多么严酷的境遇之中,心头都不应为悲观的思想所萦绕。”——稻盛和夫
1.展示
![](https://video-community.csdnimg.cn/vod-84deb4/03dde27a2e144ab2b583834ee89bd32d/snapshots/f33e06b578914c26963b3d65cfc41c52-00003.jpg?auth_key=1650805623-ba267563e68c41d987206d1ba0b1447c-0-a32f507d3271330de769c57d4e8c19f5)
音乐盒(前端练手项目)
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的朋友,点个关注每天学一点前端知识