点击下一张幻灯片

--- [编辑停止时的SoundCloud HTML5的iframe播放器---点击下一张幻灯片

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

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

--- 编辑] ---

我试图找到播放当前播放在有能力的旋转木马，当你去各个I帧任何歌曲的SoundCloud停止的方式下一张幻灯片，但是，我有这样做的主要问题。

我修改对这里的建议是：

Controlling Soundcloud HTML5 Widget Player with custom buttons

并已引用的API：

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

但是，运行我的剧本时，我得到这个错误根据FireBug在api.js的第一行：

'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>

谁能帮我解决这个好吗？

感谢

奥苏

来源

2013-01-08 Osu

好吧，我得到它的工作 - 上面编辑的代码。似乎我需要在内联框架上使用ID才能使其工作。然而，任何人都可以通过编程方式并使用jQuery选择器，在转盘内的每个iframe上看到这样的做法吗？我为一个客户端生成了一个CMS CMS中的HTML5 SoundCloud播放器的完整列表，并且不希望每次添加新的JavaScript时都要更新JavaScript .... – Osu

你真的没有为了与小部件交互使用的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-08 15:47:04

非常棒的解决方案，谢谢@ gryzzly！ – Osu

我很乐意帮 –

点击下一张幻灯片

回答

相关问题