Javascript-单击时更改图片和音频

基本上，我试图在我的网站上创建这个东西，当你点击一张图片时，图片会改变。当图片发生变化时，音频文件会显示一些信息

例如，如果你有一个简单的按钮，你点击它，它会变成Shia Labouf，一个音频文件会说JUST DO it

有人知道怎么做吗，或者如果你能指引我正确的方向去做这样的事情吗？

你应该使用Javascript库，但当然最好你研究一下，这样你就可以扩展它了：

HTML:

PS 这只会更改按钮的文本，请继续并尝试添加代码以打开音频提示：

就是一个示例

在本例中，将向用户显示来自wikipedia的图像。当用户单击图像时，列表中的另一个图像将替换上一个图像。有3个定义的图像和脚本循环

HTML

JS代码

我没有提供音频。但这应该足以给你一个想法

我的例子使用

---

希望有帮助。

这很简单，但stackoverflow指南要求您对此有基本的理解/尝试。如果没有人帮忙，那就是原因。我建议做一些谷歌搜索并修改你的问题。

<span class="btn">That was Easy Button</span>

$(document).ready(function() {
    $('.btn').click(function () {
        $(this).html('JUST DO IT!');                
    });
});

<div id="clickable">
    <img src="https://en.wikipedia.org/wiki/Sparrow#/media/File:House_Sparrow_mar08.jpg"/>
</div>

var data = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/House_Sparrow_mar08.jpg/1024px-House_Sparrow_mar08.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Ara_ararauna_Luc_Viatour.jpg/1024px-Ara_ararauna_Luc_Viatour.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Rose-ringed_Parakeet_eating_leaves.JPG/1024px-Rose-ringed_Parakeet_eating_leaves.JPG" ];
var ind = 0;

function swap(){
    ind ++;
    $('#clickable').html('<img src="' + data[ind % 3] + '"/>');
}

$('#clickable').on('click', swap);

swap();