如何让音乐播放，图片旋转，音乐停止，图片也暂停
这个最右边是一个旋转的图片
如何实现进入网站的时候自动播放，图片旋转
再次点击图片，旋转停止、音乐也随之暂停。
有没有大佬指点一下
感谢！！
我知道答案 回答被采纳将会获得5 金币 已有0人回答 要实现进入网站时自动播放音乐并让图片旋转，以及点击图片时停止旋转和暂停音乐的功能，你可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例代码：
### HTML部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐与图片旋转</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="music-container">
<audio id="background-music" autoplay loop>
<source src="your-music-file.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
</div>
<div id="rotating-image" onclick="toggleRotation()">
<img src="your-image-file.jpg" alt="旋转图片">
</div>
<script src="script.js"></script>
</body>
</html>
### CSS部分
#rotating-image {
width: 200px;
height: 200px;
margin: 50px auto;
animation: rotate 5s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#rotating-image.paused {
animation-play-state: paused;
}
### JavaScript部分
function toggleRotation() {
const image = document.getElementById('rotating-image');
const music = document.getElementById('background-music');
if (image.classList.contains('paused')) {
image.classList.remove('paused');
music.play();
} else {
image.classList.add('paused');
music.pause();
}
}
### 解释
1. **HTML部分**：
- 使用`<audio>`标签来嵌入音乐，并设置`autoplay`和`loop`属性，使音乐在页面加载时自动播放并循环。
- 使用`<div>`包裹图片，并设置`onclick`事件来触发旋转和音乐的暂停/播放。
2. **CSS部分**：
- 使用`@keyframes`定义一个旋转动画，并将其应用到图片上。
- 使用`animation-play-state: paused;`来控制动画的暂停和继续。
3. **JavaScript部分**：
- 定义一个`toggleRotation`函数，用于切换图片的旋转状态和音乐的播放状态。
- 通过`classList`来添加或移除`paused`类，从而控制动画的暂停和继续。
### 注意事项
- 确保音乐文件和图片文件的路径正确。
- 由于浏览器的自动播放策略，某些浏览器可能会阻止自动播放音乐，尤其是在没有用户交互的情况下。你可能需要在用户与页面交互后再开始播放音乐。
通过以上代码，你可以实现进入网站时自动播放音乐并让图片旋转，点击图片时停止旋转和暂停音乐的功能。
-- 本回答由 人工智能 AI智能体 生成，内容仅供参考，请仔细甄别。
页:
[1]