📅 最后修改于: 2023-12-03 15:36:50.943000 🧑 作者: Mango
在音频或视频播放的Web应用程序中，切换播放暂停按钮是必不可少的。本文将介绍如何使用jQuery和JavaScript来实现这一切换按钮，并提供详细的代码片段和注释。
首先，我们需要为切换播放暂停按钮构建HTML结构。我们将使用一个div来放置播放/暂停按钮，如下所示：
<div id="playPauseBtn">
<span id="playBtn"></span>
<span id="pauseBtn"></span>
</div>
这里我们创建了一个包含两个按钮的div。一个用于播放，一个用于暂停。这些按钮都是一个空的span元素，我们将使用CSS样式为它们添加适当的外观。
然后，我们需要使用CSS样式来为我们的按钮添加外观。我们将使用背景图像和绝对定位来实现动态切换按钮。
#playPauseBtn {
position: relative;
display: inline-block;
}
#playBtn,
#pauseBtn {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
background-repeat: no-repeat;
}
#playBtn {
background-image: url('play-icon.png');
}
#pauseBtn {
background-image: url('pause-icon.png');
display: none;
}
这里我们使用绝对定位，将我们的两个按钮覆盖在一起。然后，我们为每个按钮分别指定了一个背景图像，并使用CSS隐藏了暂停按钮。这将在稍后的JavaScript代码中用到。
下一步，我们将使用jQuery和JavaScript来切换播放暂停按钮。我们将使用click事件来监视我们的按钮，并在每个单击事件上切换按钮状态。
$(document).ready(function() {
$('#playPauseBtn').click(function() {
$('#playBtn, #pauseBtn').toggle();
});
});
这里我们选择我们的playPauseBtn div，并将一个click事件附加到它上面。在我们的click事件处理程序中，我们使用toggle函数来切换playBtn和pauseBtn的显示状态。
以下是完整的HTML，CSS和JavaScript代码：
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<style>
#playPauseBtn {
position: relative;
display: inline-block;
}
#playBtn,
#pauseBtn {
position: absolute;
top: 0;
left: 0;
width: 48px;
height: 48px;
background-repeat: no-repeat;
}
#playBtn {
background-image: url('play-icon.png');
}
#pauseBtn {
background-image: url('pause-icon.png');
display: none;
}
</style>
<script>
$(document).ready(function() {
$('#playPauseBtn').click(function() {
$('#playBtn, #pauseBtn').toggle();
});
});
</script>
</head>
<body>
<div id="playPauseBtn">
<span id="playBtn"></span>
<span id="pauseBtn"></span>
</div>
</body>
</html>
现在，我们已经了解了如何使用jQuery和JavaScript来创建切换播放暂停按钮。我们构建了一个HTML结构，使用了CSS样式为按钮添加外观，并使用了jQuery和JavaScript来实现按钮状态的切换。这将是启动音频和视频播放器的良好基础，或将切换功能应用于其他Web应用程序中的任何按钮。