Question

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

例如，如果你有“那是简单的按钮”，你点击它就会改为Shia Labeouf，一个音频文件说“只做它！”。

有谁知道如何做到这一点，或者你是否可以引导我朝着正确的方向做这样的事情？

Answer 1

您应该使用Jquery一个Javascript库this is the code you need，但当然，您可以更好地学习它，以便扩展它：

HTML：

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

使用Javascript：

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

PS 这只会更改按钮的文本，继续尝试添加代码以打开音频（提示：Play an audio file using jQuery when a button is clicked）

Answer 2

Here就是一个例子

在此示例中，向用户显示图像（来自维基百科）。当用户点击图像时，列表中的另一个替换前一个图像。定义了3个图像，脚本循环。

<强> HTML

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

JS代码

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();

我没有提供音频。但这足以让你有个主意。

我的示例使用JQuery

希望它有所帮助。

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

2 个答案: