我有一个图像,当用户将鼠标悬停在该图像上时,该图像会更改为新图像。单击新图像后,将播放音频文件。当用户将鼠标移出图像时,图像将还原为默认图像。问题是音频仍在播放。我对js不太满意,当用户的鼠标也伸出时,如何使音频暂停?任何有用的反馈,我们将不胜感激。下面是代码。
<script type="text/javascript">
function setNewImg() {
document.getElementById("about-me-img").src = "https://storage.googleapis.com/gd-wagtail-prod-assets/images/evolving_google_identity_2x.max-4000x2000.jpegquality-90.jpg";
}
function setOldImg() {
document.getElementById("about-me-img").src = "imgs/about-me.png";
}
function pauseAudio() {
document.getElementById("about-me-img").pause();
}
</script>
<audio id="audio-play">
<source src="audio.mp3" type="audio/mpeg" />
</audio>
<img id="about-me-img" onmouseover="setNewImg()" onmouseout="setOldImg()" onclick="document.getElementById('audio-play').play(); return false;" class="about-me-image about-me-img" src="imgs/about-me.png" alt="" width="200px;">
最佳答案
在pauseAudio
中调用setOldImg
,然后将document.getElementById("about-me-img").pause();
更改为document.getElementById("audio-play").pause();
function setOldImg() {
document.getElementById("about-me-img").src = "imgs/about-me.png";
pauseAudio();
}
function pauseAudio() {
document.getElementById("audio-play").pause();
}