Javascript 悬停时有三种不同的图像和声音

我有三个图像或div，在悬停时播放的每个图像都有一个声音（ambience1-ambience3）。到目前为止，它是有效的。但是，到目前为止，播放的是相同的声音，准确地说是环境3，无论我点击的是image1、image2还是image3。我对javascript不是很熟悉，所以我想应该是js

另外，当光标离开图像时，我希望声音停止，而不是暂停，当光标再次击中该区域时，声音从开头开始。见下面的代码：

var audio=$（“#audio1”）[0]；
$（“#image1”）.mouseenter（函数（）{
音频播放（）；
audio.loop=true；
});
$（“#image1”）.mouseleave（函数（）{
audio.pause（）；
});
var audio=$（“#audio2”）[0]；
$（“#image2”）.mouseenter（函数（）{
音频播放（）；
audio.loop=true；
});
$（“#image2”）.mouseleave（函数（）{
audio.pause（）；
});
var audio=$（“#audio3”）[0]；
$（“#image3”）.mouseenter（函数（）{
音频播放（）；
audio.loop=true；
});
$（“#image3”）.mouseleave（函数（）{
audio.pause（）；
});

尝试将

var audio

更改为每个

标记中的三个不同名称（如下面的代码片段（由于缺少图像和声音而无法工作）。以前行为的原因是您的

audio

变量是全局变量，被上一个脚本覆盖。请在暂停之前使用

audio.currentTime=0；

从开始播放音频

var audio1=$（“#audio1”）[0]；
$（“#image1”）.mouseenter（函数（）{
音频1.播放（）；
audio1.loop=true；
});
$（“#image1”）.mouseleave（函数（）{
audio1.currentTime=0；
暂停（）；
});
var audio2=$（“#audio2”）[0]；
$（“#image2”）.mouseenter（函数（）{
音频2.播放（）；
audio2.loop=true；
});
$（“#image2”）.mouseleave（函数（）{
audio2.currentTime=0；
暂停（）；
});
var audio3=$（“#audio3”）[0]；
$（“#image3”）.mouseenter（函数（）{
3.播放（）；
audio3.loop=true；
});
$（“#image3”）.mouseleave（函数（）{
audio3.currentTime=0；
暂停（）；
});