如何调用foundation Orbit Slider的onChange函数？
如何调用foundation Orbit Slider的onChange函数？
提问于 2015-10-01 07:23:23
我有一个基础轨道滑块。当动态观察图像发生变化时，我尝试调用一个函数。在下面的jquery中，ready.fndtn.orbit是有效的。但是，幻灯片后的更改将不会触发。基金会文档对此issue.Any不提供任何帮助建议或帮助非常受欢迎
<ul id="featured1" class="no-bullet example-orbit" data-orbit data-options="animation:fade;
timer: false;
slide_number: false;
pause_on_hover:false;
animation_speed:800;
navigation_arrows:true;
bullets:false;">
<li id="slideImg1">
<a href="training/hygiene.cfm"><img src="img/slide5.png" alt="stuff here"></a>
</li>
<li id="slideImg2">
<a href=""><img src="img/slide6.png" alt="See a Demo of the CIS-CAT Assesment Tool" ></a>
</li>
<li id="slideImg3">
<a href=""><img src="img/slide7.png" alt="The Critical SecurityControls are now available in Japanese"></a>
</li>
</ul>
<script>
$(document).on('ready.fndtn.orbit', function(e) {
captionFunction();
});
$(document).on('after-slide-change.fndtn.orbit', function(e) {
captionFunction();
});
</script>回答 1
Stack Overflow用户
发布于 2015-10-01 07:33:55
根据我在基金会文档中看到的，您似乎希望选择ul元素来添加事件处理程序，在本例中是：$("#featured1").on("after-slide-change.fndtn.orbit")....，而不是选择$(document)。我在一个快速的示例中尝试了它，事件触发得很好。
查看http://foundation.zurb.com/docs/components/orbit.html并搜索'after-slide-change.fndtn.orbit‘来查看我正在查看的示例。
更新
我已经设置了一个jsFiddle来演示它的工作原理(您必须滚动到javascript面板的底部才能看到相关内容)。关键似乎是用$(document).ready(function(){和});包围javascript
$(document).ready(function() {
// this should come before initializing orbit or it won't fire
$("#featured1").on('ready.fndtn.orbit', function(e) {
console.log('orbit is ready');
});
$(document).foundation({
orbit: {
animation: 'fade',
timer: false,
slide_number: false,
pause_on_hover: false,
animation_speed: 800,
navigation_arrows: true,
bullets: false
}
});
$("#featured1").on('after-slide-change.fndtn.orbit', function(e) {
console.log('getting after slide change event!');
});
});请注意，我必须添加对$(document).foundation的调用，并且必须将计时器设置为true，因为我看不到手动更改幻灯片的导航箭头。最后，我没有你的图片，所以它很难看，但我认为它展示了如何让事情足够好地工作，即使这样;)
无论如何，当您访问该链接时，打开浏览器的javascript控制台以查看输出“see slide change event!”。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32877093
复制相关文章
相似问题
腾讯云开发者
