三种不同的图像和声音上悬停

问题描述 投票:1回答:1

我有三个图像或div的,有一个分配给该悬停播放每个图像的声音(ambience1 - ambience3)。到目前为止,它的工作原理。但是,截至目前,同样的声音播放,ambience3准确地说,不管我打图像1,图像2和图像3。我不是很熟悉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个回答
1
投票

尝试改变var audio在每个<script>标签三个不同的名字(例如下面片断(其中由于缺乏图像的未作品和声音)。先前行为的原因是,你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>
© www.soinside.com 2019 - 2024. All rights reserved.