html/css/jq 简单的音乐播放器
一：准备工作：安装jq
一：.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐播放器</title>
<link rel="stylesheet" type="text/css" href="./css/music.css" />
</head>
<body>
<div id="" class="banner">
<ul>
<li class="m1" datasrc="img/mp3/mp3-1.mp3" title="龙卷风-邓紫棋">
<img src="img/imgs/img1.jpg" width="65">
</li>
<li class="m2" datasrc="img/mp3/mp3-2.mp3" title="Sober-bigbang">
<img src="img/imgs/img2.jpg" width="90">
</li>
<li class="m3" datasrc="img/mp3/mp3-3.mp3" title="绅士-薛之谦">
<img src="img/imgs/img3.jpg" width="119">
</li>
<li class="m4" datasrc="img/mp3/mp3-4.mp3" title="杀手-林俊杰">
<img src="img/imgs/img4.jpg" width="90">
</li>
<li class="m5" datasrc="img/mp3/mp3-2.mp3" title="baby-just">
<img src="img/imgs/img5.jpg" width="65">
</li>
</ul>
</div>
<div id="" class="music">
<div id="" class="m_img">
<img src="img/imgs/img1.jpg" width="90">
</div>
<div id="" class="m_text">龙卷风-邓紫棋</div>
<div id="" 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 id="" class="m_close ">
</div>
<audio src="img/mp3/mp3-1.mp3" class="m_mp3">
当前浏览器不支持audio
</audio>
</div>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script src="js/music.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
二：.css文件
@charset "utf-8";
body{
background: url(../img/imgs/img1.jpg) no-repeat;
background-size: cover;
}
/* 设置横幅 start*/
.banner{
width: 960px;
height: 250px;
margin: 80px;
background-color: pink;
opacity: 0.8;
box-shadow: 10px 15px 15px black;
position: relative;
}
.banner ul li{
list-style: none;
display: inline-block;
position: absolute;
border-radius: 2px;
padding: 1px;
box-shadow: 10px 15px 15px black;
}
.banner ul li img{
border-radius: 50%;
cursor: pointer;
display: block
}
.m1{
top:30px;left: 90px;
}
.m2{
top:140px;left: 160px;
}
.m3{
top:67px;left: 308px;
}
.m4{
top:50px;left: 500px;
}
.m5{
top:160px;left: 580px;
}
/* 设置横幅 end */
/* 播放器start */
.music{
width: 550px;
height: 105px;
background: black;
position: fixed;
left: 0;
bottom: 50px;
opacity: 0.8;
box-shadow:10px 15px 15px black;
}
.music .m_img{
margin-top: 15px;
margin-left: 10px;
float: left;
}
.music .m_text{
float: left;
color: #fff;
font-size: 20px;
font-weight: bold;
margin-top: 50px;
margin-left: 20px;
}
.music .m_btn{
position: absolute;
left: 335px;
}
.music .m_btn a{
float: left;
width: 33px;
height: 33px;
background: url(../img/imgs/bg-img.png);
margin-top: 50px;
margin-left: 20px;
}
.music .m_btn .m_prev{
background-position: -67px -5px;
}
.music .m_btn .m_prev:hover{
background-position: -67px -32px;
}
.music .m_btn .m_play{
background-position: -98px -8px;
}
.music .m_btn .m_play:hover{
background-position: -98px -46px;
}
.music .m_btn .m_next{
background-position: -136px -5px;
}
.music .m_btn .m_next:hover{
background-position: -136px -32px;
}
.music .m_close{
background-image:url(../img/imgs/bg-img.png);
float: right;
width: 19px;
height: 105px;
cursor: pointer;
background-position:-24px -4px;
}
/* 图片旋转的动画 */
@keyframes img_rotate{
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
.banner .img_rotate{
animation: img_rotate 2s infinite linear;
}
/* 播放器end*/
/* 编写js时要更换的样式 */
/* 更换播放按钮 */
.music .m_btn .m_pause{
background-position:-269px -88px;
}
.music .m_btn .m_pause:hover{
background-position:-306px -88px;
}
.music .m_open{
background-position: -45px -4px;
}
三：.js文件
// 要实现的效果：
// 1.获取li里面的index()
// 2.更换背景图片
// 3.更换播放器图片、文本
// 4.更换播放按钮及title为暂停
// 5.图片旋转
// 6.歌曲播放
// 7.暂停/播放
// 8.上一首/下一首
// 9.播放可以显示与隐藏
// 手机数据
var index=0;//li初始索引
var li=$(".banner ul li");//所有li元素
var img=$(".music .m_img 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(){
// console.log($(this).index())
index=$(this).index()
// 播放歌曲
show(index)
})
// 更换背景图片
function show(index){
change_bg(index+1);
change_img_text(index+1);
change_btn_title()
img_rotate(index)
play_mp3()
}
// 更换背景
function change_bg(index){
console.log(index,888)
$("body").css({
"background": `url(img/imgs/img${index}.jpg) no-repeat`,
"background-size": "cover"
});
}
// 更换播放器的图片和文本
function change_img_text(index){
img.attr("src","img/imgs/img"+index+".jpg")//更换播放器图片
text.html(li.eq(index-1).attr("title"))//获取到li的title属性后替换文本
}
// 更换播放按钮及title为暂停
function change_btn_title(){
play.removeClass("m_play");
play.addClass("m_pause");
play.attr("title","暂停")
}
// 图片旋转
function img_rotate(){
// 移除所有img图片旋转样式
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(){
if(flag){
mp3.get(0).pause();//暂停歌曲
li.eq(index).children().removeClass("img_rotate");//图片停止旋转
play.removeClass("m_pause").addClass("m_play").attr("title","播放");
flag=false;
}else{
mp3.get(0).play();
li.eq(index).children().addClass("img_rotate");
play.removeClass("m_play").addClass("m_pause").attr("title","暂停")
flag=true;
// 第一次进入页面直接点击播放按钮时的背景处理
change_bg(index+1);
}
})
// 上一首
prev.click(function(){
index--;
if(0>index){
index=li.length-1;
}
// 播放歌曲
show(index);
})
// 下一首
next.click(function(){
index++;
if(li.length-1<index){
index=0;
}
show(index)
})
// 隐藏或者显示播放器
$(".m_close").click(function(){
console.log(888)
// 如果显示，则隐藏
if(close){
console.log(999)
$(this).addClass("m_open");
$(".music").animate({"left":"-520px"},1000)
close=false
}else{
console.log(777)
$(this).removeClass("m_open");
$(".music").animate({"left":"0px"},1000)
close=true
}
})
四：效果展示
五.技术重点：
1.a标签上放背景图片，背景图片给background-position移动精灵图。
2.$(this).index()：查看当前元素的索引。
3.get()函数不是ajax中的get而是将jq获取的元素转成js原生的元素；用get()的时候里面必须加0。
4.编写代码之前先把逻辑思路理清楚方便后面行动。
5.用到$(selector).attr(attribute,value)：设置被选元素的属性和值。
6.eq(index)：eq() 方法将匹配元素集缩减值指定 index 上的一个。
如：$("body").find("div").eq(2).addClass("blue")：通过为 index 为 2 的 div 添加适当的类，将其变为蓝色。
7.css的animate动画，true/false标记状态值。
386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
