javascript - 将 Orbit Slider 与视频一起使用

Question

我有一个关于Orbit Slider的问题。

我想在滑块中放置一个 youtube 视频。我用div和embed替换了img，成功了。视频可以播放和停止。

我的问题是，当用户在滑块中的视频上按下PLAY时，如何使滑块的计时器停止？

Answer 1

如果您查看 Orbit 滑块 javascript，它使用事件工作。在 Orbit JS 文件中查找这些代码

  this.$element.bind('orbit.start', function (event, index) {
    self.startClock();
  });

  this.$element.bind('orbit.stop', function (event, index) {
    self.stopClock();
  });

这些将事件 'orbit.stop' 和 'orbit.start' 事件绑定到 HTML 元素（在使用 Foundation 设置 Orbit 的方式时，它通常具有 ID 'featured'）。因此，如果您从 HTML 元素触发这些事件，例如“orbit.stop”，它将调用函数 stopClock()。以下应该有助于...

HTML

<a id="stop-button" href="#" class="button rounded">stop</a>
<a id="start-button" href="#" class="button rounded">start</a>

Javascript

$('#stop-button').on('click',function(){
    $('#featured').trigger('orbit.stop');
});

$('#start-button').on('click',function(){
    $('#featured').trigger('orbit.start');
});


/*using the setup 
<div id="featured">
  <img src="../images/orbit-demo/demo1.jpg" />
  <img src="../images/orbit-demo/demo2.jpg" />
  <img src="../images/orbit-demo/demo3.jpg" />
</div>
*/