-1

我有两个图像，sound_on.png 和 sound_off.png。两者具有相同的高度和尺寸。

我想为以下操作附加一个 JavaScript：

  1. 当按下的图像从 sound_off.png 变为 sound_on.png 并播放声音时
  2. 再次按下按钮时，它会从 sound_on.png 变回 sound_off.png 并且声音会随着 onclick 命令停止

目前我有这些代码行：

<a href="#" onClick="playAudio();"><img src="images/general/sound-on.png" width="40" height="32"></a>
<a href="#" onClick="stopAudio();"><img src="images/general/sound-off.png" width="40" height="32"></a>

我需要什么代码才能使它们像上面的示例一样？

我有这部分：

<style type="text/css">
.on {background-image:url url(images/general/sound-off.png)); background-repeat:no-repeat;}
.off {background-image:url(images/general/sound-on.png); background-repeat:no-repeat;}
</style>
<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

使用此 DIV 作为按钮：

div id="onoff" class="playlist_btn"><img src="images/general/sound-off.png" width="50 height="50" onclick="togglestyle(onoff)"></div>

这使得切换，但到目前为止我不知道如何连接 onclick 命令来播放音频并再次停止它。

会是这样吗？

function togglestyle(el){if(el.className == "on" onClick="playAudio()") {el.className="off" onClick"stopAudio()";} else {el.className="on";}}
4

2 回答 2

1

只需直接从您现有的切换功能调用声音功能：

function togglestyle(el){

    if(el.className == "on") {
        el.className="off";
        stopAudio();
    }
    else {
        el.className="on";
        playAudio();
    }
}
于 2012-09-19T20:36:21.013 回答
0

这个脚本结合起来也能解决问题

<script>
function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}
</script>


<img id="on" src="images/general/sound-off.png" width="40" height="32" onClick="javascript:hideShow('on'); javascript:showHide('off'); javascript:playAudio()" alt="on">
<img id="off" src="images/general/sound-on.png" width="40" height="32" onClick="javascript:hideShow('off'); javascript:showHide('on')" style="display:none;" alt="off">

但是我想知道是否有一种方法可以检测音频何时播放完毕并返回关闭状态并集成一个 trird 选项，以暂停音频（带有暂停图像）并继续音频离开的地方？有任何想法吗？

于 2012-09-19T21:23:41.853 回答