[英]orbit jquery slider pause on last slide
我正在使用Zurb轨道滑块: http ://www.zurb.com/playground/jquery_image_slider_plugin
我使用以下设置进行幻灯片放映:
$(window).load(function() {
$('#featured').orbit({
animation: 'fade',
animationSpeed: 100, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 250, // time between transitions
directionalNav: false, // manual advancing directional navs
afterSlideChange: function(){} // empty function
});
});
然后我使用CSS隐藏计时器(因为如果我关闭计时器,则帧不会前进,并且我隐藏了定向导航,所以...):
div.timer {display: none;}
无论如何,到目前为止,一切对我来说都很完美。 我能弄清楚该怎么做才能使幻灯片放映停止在幻灯片中旋转,即停止在最后一张幻灯片上/而不是循环回到第一张幻灯片。
我怀疑答案与幻灯片更改后添加功能的能力有关:
afterSlideChange: function(){}
但是,a,这个JS超越了我。
万一您好奇:这是一个小实验,其中我使用jquery滑块创建一种定格动画,这是我一直想知道的一种技术。 它的工作效果很好,但永久循环确实使事情搞砸了。 :)
非常感谢您抽出宝贵的时间并分享您的专业知识!
乔恩
我在搜索自己时发现了这个: https : //github.com/zurb/orbit/issues/49
弄清楚了,但是,仅当您将“轨道”滑块设置为在鼠标悬停时暂停时,此方法才起作用。
解决方案:如果已将轨道滑块设置为在鼠标悬停时暂停,则可以使用jquery在特定幻灯片上触发mouseover事件。 我基本上使用了计数器和afterslidechange函数将它们放在一起。 下面是代码,只需将其复制并粘贴到html文件中或Orbit滑块存在的位置即可。
注意:下面的代码设置为四张幻灯片。 一个循环后,它将在第一张幻灯片上停止。 如果要更改幻灯片编号,只需在if条件下更改计数值。 您还需要向滑块中的每个图像添加链接,并为每个链接分配ID。 这是调用on mouseover事件所必需的。
<div id="featured">
<a href="#" id="link"><img src="images/hero1.jpg" /></a>
<a href="#" id="link"><img src="images/hero2.jpg" /></a>
<a href="#" id="link"><img src="images/hero3.jpg" /></a>
<a href="#" id="link"><img src="images/hero4.jpg" /></a>
</div>
<script type="text/javascript">
var count = 1;
$(window).load(function()
{
$('#featured').orbit(
{
afterSlideChange: function()
{
count++;
if(count == 5)
{
$("#link").trigger("mouseover");
}
}
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.