Question

我是JS的新手，我有一个非常简单的问题。

我希望有一个小图片，当点击时更改为不同的图像，同时开始播放循环声音文件。再次单击图像时，它会更改回原始图像并停止声音文件。

您可以将其视为一个“开始”的按钮。当单击“开始”时，它会循环播放声音并更改为“停止”，当单击“停止”时，它会返回开始并且声音停止播放。

我已经在标签内部创建了没有显示的复选框，该标签是一个正方形，当检查时播放声音并且当未选中时停止声音。问题是我无法通过“检查”，“取消选中”将复选框更改为不同的图像。

我也有一些链接更改图像的代码，但我无法弄清楚如何让它播放声音。

所以基本上我需要结合这两件事。但我无法弄清楚如何。我一直在谷歌搜索过去两天不间断但无法找到明确和简单的答案。

知道我计划在同一页面上放置许多这些小的可点击图像可能会有所帮助，因此Javascript需要能够轻松但影响所有链接或div或最终它们。

抱歉这么长的问题。任何人

提前致谢！

Answer 1

<html>
    <head>
        <script type="text/javascript">
            var pos = 0
            var sId = 'sound';

            function change() {
                if(pos == 0) {
                    pos = 1;
                    document.getElementById('btn').src="http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png";

                    var e = document.createElement('embed');
                    e.setAttribute('src','beep.mp3');
                    e.setAttribute('id',sId);
                    e.setAttribute('hidden','true');
                    e.setAttribute('autostart','true');
                    e.setAttribute('loop','true');

                    document.body.appendChild(e);
                } else {
                    pos = 0;
                    document.getElementById('btn').src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png";
                    document.body.removeChild(document.getElementById(sId));
                }
            }
        </script>
    </head>
    <body>
        <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="change()" id="btn" />
    </body>
</html>

那怎么样，我认为它应该有用。

修改这是一个应该做你需要的OO版本：

<html> <head> <script type="text/javascript"> function imageSwitch(_imgID,_imgStart,_imgStop,_soundFile) { this.imgID = _imgID; this.imgStart = _imgStart; this.imgStop = _imgStop; this.soundFile = _soundFile; this.pos = 0; this.e; this.change = function() { if(this.pos == 0) { this.pos = 1; document.getElementById(this.imgID).src = this.imgStop; this.e = document.createElement('embed'); this.e.setAttribute('src',this.soundFile); this.e.setAttribute('id','sound'+this.imgID); this.e.setAttribute('hidden','true'); this.e.setAttribute('autostart','true'); this.e.setAttribute('loop','true'); document.body.appendChild(this.e); } else { this.pos = 0; document.getElementById(this.imgID).src = this.imgStart; this.e.parentNode.removeChild(this.e); } } } </script> <script type="text/javascript"> var abc = new imageSwitch('btn1','http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png','http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png','beep.mp3'); var def = new imageSwitch('btn2','http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png','http://www.buzzingup.com/wp-content/uploads/2011/07/stop.png','beep.mp3'); </script> </head> <body> <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="abc.change()" id="btn1" /> <img src="http://geekoffices.com/wp-content/uploads/2011/07/start-button-300x299.png" onClick="def.change()" id="btn2" /> </body> </html>

Javascript声音开始/停止和图像更改

1 个答案: