Javascript 带HTML5横幅内容的引导旋转木马-如何暂停动画，直到用户观看该幻灯片？

我正在创建一个展示HTML5横幅的数字组合。我正在建立一个基础，并利用引导旋转木马为我的用户翻转通过不同的HTML5横幅创意。我已经使用iframe在旋转木马中显示这些横幅，它可以工作，下面是我的代码：

<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
    <li data-target="#carouselvideo" data-slide-to="1"></li>
    <li data-target="#carouselvideo" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
    <div class="item active">
        <iframe src="/digital-portfolio/banners/1/300x600" width="300" height="600" frameborder="0"></iframe>
    </div>
    <div class="item">
        <iframe src="/digital-portfolio/banners/2/300x600" width="300" height="600" frameborder="0"></iframe>
    </div>
    <div class="item">
        <iframe src="/digital-portfolio/banners/3/300x600" width="300" height="600" frameborder="0"></iframe>
    </div>
</div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

是否有一种方法可以初始化动画以在用户在该幻灯片上时启动，或通过单击旋转木马控件触发动画

以下是滑块外观的图像：

---

还不完全清楚NanoTween代码在哪里运行。我假设它是在iframe中运行的。首先，您需要知道特定幻灯片何时处于活动状态。这可以通过挂接父页面中的旋转木马事件来实现。有两个事件，slide.bs.carousel在转换到新幻灯片时触发，slide.bs.carousel在新幻灯片激活时触发

jQuery(function($) {
    $('.carousel').on('slide.bs.carousel', function (e) {
        // stop any active slides
        $('iframe[src*="play"]',this).each(function() {
           $(this).attr('src',$(this).attr('src').split('#')[0]+"#stop");
        });
        $('iframe',e.relatedTarget).each(function() {
           $(this).attr('src',$(this).attr('src').split('#')[0]+"#play");
        });
    });

});

一旦知道幻灯片处于活动状态，就可以通过在url末尾添加哈希来通知iframe。在每个iframe中，当散列更改时，可以启动或停止动画：

function init() {

    /* remove this
    setTimeout(function() {
        startAnimation();
    }, 100);
    */

    window.onhashchange = function(){ 
        switch(location.hash.slice(1)) {
           case 'play':
              startAnimation();
              break;
           case 'stop':
              stopAnimation();
              break;
        }
    };

    window.onhashchange();
}

最后，在最初处于活动状态的幻灯片上设置哈希

<div class="item active">
    <iframe src="/digital-portfolio/banners/1/300x600#play" width="300" height="600" frameborder="0"></iframe>
</div>

---

还不完全清楚NanoTween代码的运行位置。我假设它是在iframe中运行的。首先，您需要知道特定幻灯片何时处于活动状态。这可以通过挂接父页面中的旋转木马事件来实现。有两个事件，slide.bs.carousel在转换到新幻灯片时触发，slide.bs.carousel在新幻灯片激活时触发

jQuery(function($) {
    $('.carousel').on('slide.bs.carousel', function (e) {
        // stop any active slides
        $('iframe[src*="play"]',this).each(function() {
           $(this).attr('src',$(this).attr('src').split('#')[0]+"#stop");
        });
        $('iframe',e.relatedTarget).each(function() {
           $(this).attr('src',$(this).attr('src').split('#')[0]+"#play");
        });
    });

});

一旦知道幻灯片处于活动状态，就可以通过在url末尾添加哈希来通知iframe。在每个iframe中，当散列更改时，可以启动或停止动画：

function init() {

    /* remove this
    setTimeout(function() {
        startAnimation();
    }, 100);
    */

    window.onhashchange = function(){ 
        switch(location.hash.slice(1)) {
           case 'play':
              startAnimation();
              break;
           case 'stop':
              stopAnimation();
              break;
        }
    };

    window.onhashchange();
}

最后，在最初处于活动状态的幻灯片上设置哈希

<div class="item active">
    <iframe src="/digital-portfolio/banners/1/300x600#play" width="300" height="600" frameborder="0"></iframe>
</div>