Question

我有一个带3张图像的基本滑块。在3张图片中，我有1个动画gif，它还有一个链接到它的音频剪辑。我希望只有在动画GIF幻灯片出现时才能播放音频剪辑（音频剪辑只有3秒钟）。我将如何在jQuery中进行此操作？

HTML：

<div id="carousel-main" class="carousel slide">
  <div class="carousel-inner">
    <div class="active item">
       <img src="image-1.jpg" alt="">
    </div>
    <div class="item">
       <img src="animated.gif" alt="">
       <embed src="audio/clip.mp3"></embed>
    </div>
    <div class="item">
       <img src="image-3.jpg" alt="">
    </div>
  </div>
</div>

JS：

$('#carousel-main').carousel({interval: 3200});

Answer 1

首先，将embed转换为audio ...如果您要使用HTML5标记，也可以将其设为正确。

<audio src="audio/clip.mp3"></audio>

其次，试试这个功能：

function playClip(){
    if($('.item').eq(1).hasClass('active')){
         $(this).next().get(0).play();
    }
}

如果正确的幻灯片处于活动状态，这将播放剪辑，但您需要将此调用与旋转木马的旋转同步：

window.setInterval(playClip,3200);

这理论上应该将音频与旋转木马同步，每次旋转木马移位时运行该功能，如果第二个激活，则播放剪辑。未经测试，但应该有效。

在旋转木马/滑块内的特定幻灯片图像上播放音频剪辑？

1 个答案: