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

【问题标题】：Javascript - Change picture and change audio when clickedJavascript - 单击时更改图片并更改音频
【发布时间】：2015-09-07 06:31:00
【问题描述】：

基本上，我正在尝试在我的网站上创建这个东西，当您单击图片时，图片会发生变化。当图片发生变化时，音频文件会说明一些内容。

例如，如果您有“That was Easy Button”，点击它，它会变成 Shia Labeouf，然后一个音频文件显示“JUST DO IT！”。

有谁知道如何做到这一点，或者如果你能引导我找到正确的方向来做这样的事情？

【问题讨论】：

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

标签： javascript html image audio web

【解决方案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）

【讨论】：

【解决方案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

希望对你有帮助。

【讨论】：