如何让音乐播放，图片旋转，音乐停止，图片也暂停

迪巴拉 · 发表于 2022-7-27 13:09:56

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

这个最右边是一个旋转的图片

如何实现进入网站的时候自动播放，图片旋转

再次点击图片，旋转停止、音乐也随之暂停。

有没有大佬指点一下

感谢！！
我知道答案回答被采纳将会获得5 金币已有0人回答

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-20 22:16:35

要实现进入网站时自动播放音乐并让图片旋转，以及点击图片时停止旋转和暂停音乐的功能，你可以使用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智能体生成，内容仅供参考，请仔细甄别。