使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)_网页音乐播放器源码_简单音乐首页html+css

.home-section{
width: 100%;
padding: 20px;
height: 100%;
padding-bottom: 100px;
overflow-y: auto;
}

/* carousel */

.carousel{
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px;
box-shadow: var(–shadow);
position: relative;
}

.carousel img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: 1s;
}

.carousel img.active{
opacity: 1;
}

您可以看到我们在这里使用了 CSS 变量，因此我们将来可以轻松更改此音乐播放器主题。


**输出**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5e02e4835274417f9ff0ea5ca76c731a.png)


请注意，这是为移动视图设计的，这就是为什么我使用 chrome 检查器以移动尺寸查看它的原因。


现在创建水平滚动播放列表。放在`home-section`里面


**HTML**



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

最近播放

根据你的喜好

**CSS**



1
2
3
4
5

.heading{
margin: 30px 0 10px;
text-transform: capitalize;
font-weight: 400;
font-size: 30px;
}

/* playlists card */

.playlists-group{
position: relative;
width: 100%;
min-height: 200px;
height: auto;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}

.playlist-card{
flex: 0 0 auto;
max-width: 150px;
height: 100%;
margin-right: 20px;
}

.playlist-card-img{
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 20px;
}

.playlist-card-name{
width: 100%;
text-align: justify;
font-size: 20px;
text-transform: capitalize;
padding: 5px;
}

**输出**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/975b293d1475474a896ea93802835e18.png)


我们完成了`home section`。但是我们的旋转木马还不起作用，所以让我们使用 js 让它工作。打开app.js文件并开始编码。



1
2
3
4
5
6
7
8
9

const carousel = […document.querySelectorAll(‘.carousel img’)];

let carouselImageIndex = 0;

const changeCarousel = () => {
carousel[carouselImageIndex].classList.toggle(‘active’);

if(carouselImageIndex >&#