0

我有一个带有 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});
4

1 回答 1

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);

理论上，这应该将音频与轮播同步，每次轮播移动时运行该函数，如果第二个处于活动状态，则播放剪辑。未经测试，但应该可以工作。

于 2013-04-15T21:29:41.100 回答