前段实现可点击切换音乐的播放列表,包括css部分
时间: 2024-04-29 16:20:53 浏览: 11
HTML部分:
```
<div class="playlist">
<h2>播放列表</h2>
<ul>
<li class="active">歌曲1</li>
<li>歌曲2</li>
<li>歌曲3</li>
<li>歌曲4</li>
</ul>
</div>
```
CSS部分:
```
.playlist {
background-color: #f5f5f5;
padding: 20px;
border-radius: 10px;
}
.playlist h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.playlist ul {
list-style: none;
padding: 0;
margin: 0;
}
.playlist li {
padding: 10px;
cursor: pointer;
}
.playlist li.active {
background-color: #333;
color: #fff;
}
```
JavaScript部分(使用jQuery库):
```
$('.playlist li').click(function() {
$('.playlist li').removeClass('active');
$(this).addClass('active');
// 切换音乐播放
});
```
相关问题
点击图片播放暂停音乐css+js
好的,你可以按照以下步骤实现点击图片播放暂停音乐的效果:
1. 准备一个音频文件和一个图片文件,并将它们放在你的项目中。
2. 在 HTML 中添加一个 `<audio>` 元素和一个 `<img>` 元素,分别用于显示图片和播放音频。
```html
<img src="your-image-file.jpg" id="audio-img" onclick="toggleAudio()">
<audio id="audio-player" src="your-audio-file.mp3"></audio>
```
3. 在 CSS 中设置图片的样式,例如大小和位置。
```css
#audio-img {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
```
4. 在 JavaScript 中实现点击图片播放暂停音乐的功能,可以使用 `play()` 和 `pause()` 方法来控制音频的播放和暂停。
```javascript
var audioPlayer = document.getElementById("audio-player");
var audioImg = document.getElementById("audio-img");
function toggleAudio() {
if (audioPlayer.paused) {
audioPlayer.play();
audioImg.src = "pause-image-file.jpg"; // 切换为暂停图标
} else {
audioPlayer.pause();
audioImg.src = "play-image-file.jpg"; // 切换为播放图标
}
}
```
这样,当你点击图片时,就可以播放或暂停音频了。当音频开始播放时,图片会切换为暂停图标;当音频暂停时,图片会切换为播放图标。当然,你需要根据自己的实际情况来修改代码中的文件名和样式。
html + css 实现一排按钮,点击切换按钮样式
好的,可以使用以下的 HTML 和 CSS 代码来实现一排按钮,并且点击按钮可以切换按钮的样式:
HTML代码:
```html
<div class="buttons">
<button class="active">Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>
```
CSS代码:
```css
.buttons {
display: flex;
justify-content: center;
align-items: center;
}
button {
margin: 0 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
background-color: #ccc;
color: #fff;
cursor: pointer;
}
button.active {
background-color: #f00;
}
```
在这段代码中,我们使用了 flexbox 布局来使这些按钮水平居中,同时使用了 margin 和 padding 来设置按钮的间距和内边距,使用了 border-radius 来设置按钮的圆角,使用了 background-color 和 color 来设置按钮的背景色和字体颜色,使用了 cursor: pointer 来设置鼠标悬停时的鼠标样式。
同时,我们使用了一个 active 的类来设置当前选中的按钮的样式,当这个类被添加到某个按钮上时,这个按钮的背景色会变成红色。我们可以使用 JavaScript 来实现点击按钮后添加或移除这个类。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)