0

--- [编辑 ---

我不得不使用getElementByID下面的工作，但是，有没有办法一次影响轮播中的所有iframe，而不是单独添加 ID，即以编程方式？我在 CMS 中生成 SoundCloud 播放器，因此需要一种方法，每次添加新播放器时我都不必更新 JS...

下面编辑代码以反映工作解决方案。

---编辑] ---

当您转到下一张幻灯片时，我正在尝试找到一种方法来阻止 SoundCloud 播放当前在轮播中的各种 iframe中播放的任何歌曲，但是，我在这样做时遇到了重大问题。

我已经修改了这里的建议：

使用自定义按钮控制 Soundcloud HTML5 Widget Player

并引用了 API：

http://developers.soundcloud.com/docs/api/html5-widget

但是，在运行我的脚本时，api.js根据 FireBug，我在第一行收到此错误：

'Uncaught TypeError: Cannot read property 'parentWindow' of undefined'

这是我页面顶部的代码：

<!-- Load SoundCloud API and controls -->
    <script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
    <script>
$(document).ready(function() {
    /* ****************************************************************** */
                    /* !SOUNDCLOUD WIDGET CONTROLLER */
    /* ****************************************************************** */ 
    // Get elements by ID
    var widget1 = SC.Widget(document.getElementById('sc-1'));
    var widget2 = SC.Widget(document.getElementById('sc-2'));
    widget1.bind(SC.Widget.Events.READY, function() {
        console.log('Ready...');
    });
    widget2.bind(SC.Widget.Events.READY, function() {
        console.log('Ready...');
    });
    $('#nx, #pr').click(function() {
        widget1.pause();
        widget2.pause();
    });
});
</script>

这是 HTML 标记：

<div class="carousel">
    <div class="slide">
        <h3>Intro</h3>
        <div class="desc"></div>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    <div class="slide">
        <h3>Reel</h3>
        <div class="desc"></div>
        <span class="embed"><iframe width="100%" id="sc-1" height="315" frameborder="no" scrolling="no" src="#soundcloudurl"></iframe></span>
    </div>
    <div class="slide">
        <h3>Another reel</h3>
        <div class="desc"></div>
        <span class="embed"><iframe width="100%" id="sc-2" height="315" frameborder="no" scrolling="no" src="#soundcloudurl"></iframe></span>
    </div>...
</div> <!-- End div#carousel -->
<a href="javascript:void(0);" class="cnav" id="pr"></a>
<a href="javascript:void(0);" class="cnav" id="nx"></a>

谁能帮我解决这个问题？

谢谢

大须

4

1 回答 1

3

您实际上不必使用 ID 来与小部件交互，DOM 节点引用也一样好。

var widgets = [];

// here's a selector that gets the widgets
$('.carousel iframe').each(function (index, iframe) {
  widgets.push(SC.Widget(iframe));
});

// at this point, `widgets` holds collection of all widgets in your carousel
// you could also get whatever iframes you like, first, last, first couple of them etc.
$('#nx, #pr').click(function() {
  for (var i = 0, len = widgets.length; i < len; i++) {
    widgets[i].pause();
  }
});
于 2013-01-08T15:47:04.510 回答