Question

我有三个图像或div，在悬停时播放的每个图像都分配有声音（环境1-环境3）。到目前为止，它仍然有效。但是，到目前为止，无论我按下image1，image2还是image3，都将播放相同的声音，准确地说是ambience3。我对javascript不太熟悉，所以我猜是js。

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

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>	
  <div id="image1">
      <img class="bottom" src="dcim/20190202_100649 copy.jpg" />
      <img class="top" src="dcim/20190202_100649.jpg" />
      <audio id="audio1">
          <source src="ambience1.mp3"/>
      </audio>
  </div>

  <div id="image2">
      <img class="bottom" src="dcim/20190202_102808 copy.jpg" />
      <img class="top" src="dcim/20190202_102808.jpg" />
      <audio id="audio2">
          <source src="ambience2.mp3"/>
      </audio>
  </div>
		
  <div id="image3">
      <img class="bottom" src="dcim/20190202_101713 copy.jpg" />
      <img class="top" src="dcim/20190202_101713.jpg" />
      <audio id="audio3">
          <source src="ambience3.mp3"/>
      </audio>
  </div>

  <script>
      var audio = $("#audio1")[0];
      $("#image1").mouseenter(function() {
          audio.play();
          audio.loop = true;
      });
      $("#image1").mouseleave(function() {
          audio.pause();
      });
  </script>

  <script>
      var audio = $("#audio2")[0];
      $("#image2").mouseenter(function() {
          audio.play();
          audio.loop = true;
      });
      $("#image2").mouseleave(function() {
          audio.pause();
      });
  </script>

  <script>
      var audio = $("#audio3")[0];
      $("#image3").mouseenter(function() {
          audio.play();
          audio.loop = true;
      });
      $("#image3").mouseleave(function() {
          audio.pause();
      });
  </script>

</body>

Answer 1

请尝试在每个var audio标签中将<script>更改为三个不同的名称（如下面的代码段所示（由于缺少图片和声音而无法使用）。以前的行为是因为您的{{ 1}}变量是全局变量，被上一个脚本覆盖。请在暂停前使用audio从头开始播放音频

audio.currentTime = 0;

悬停时会显示三种不同的图像和声音

1 个答案: