悬停时三种不同的图像和声音答案

【问题标题】：three different images and sounds on hover悬停时三种不同的图像和声音
【发布时间】：2019-02-06 14:04:31
【问题描述】：

我有三个图像或 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>

【问题讨论】：

标签： javascript html

【解决方案1】：

尝试在每个<script> 标记中将var audio 更改为三个不同的名称（如下面的sn-p（由于缺少图像和声音而无法使用）。之前的行为的原因是您的audio 变量是全局的并被最后一个脚本覆盖。在暂停之前使用audio.currentTime = 0; 从头开始播放音频

<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 audio1 = $("#audio1")[0];
    $("#image1").mouseenter(function() {
      audio1.play();
      audio1.loop = true;
    });
    $("#image1").mouseleave(function() {
      audio1.currentTime = 0;
      audio1.pause();
    });
  </script>

  <script>
    var audio2 = $("#audio2")[0];
    $("#image2").mouseenter(function() {
      audio2.play();
      audio2.loop = true;
    });
    $("#image2").mouseleave(function() {
      audio2.currentTime = 0;
      audio2.pause();
    });
  </script>

  <script>
    var audio3 = $("#audio3")[0];
    $("#image3").mouseenter(function() {
      audio3.play();
      audio3.loop = true;
    });
    $("#image3").mouseleave(function() {
      audio3.currentTime = 0;
      audio3.pause();
    });
  </script>

</body>

【讨论】：