轨道 jquery 滑块在最后一张幻灯片上暂停

Question

我正在使用 Zurb Orbit Slider：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 隐藏计时器（因为如果我关闭计时器，那么帧不会前进，并且我隐藏了方向navs so...)：

div.timer {display: none;}

无论如何，到目前为止，一切对我来说都很完美。我能弄清楚如何做是让幻灯片放映停止在幻灯片中旋转，即停止在最后一张幻灯片上/不循环回到第一张幻灯片。

我怀疑答案与在幻灯片更改后添加功能的能力有关：

afterSlideChange: function(){}

但是，唉，这个 JS 超出了我的能力范围。

如果你好奇：这是一个小实验，我使用 jquery 滑块创建一种定格动画，这是我已经想知道了一段时间的技术。它工作得很好，但永远的循环真的把事情搞砸了。 :)

非常感谢您抽出时间并分享您的专业知识！

乔恩

Answer 1

弄清楚了，但是只有当您将轨道滑块设置为在鼠标悬停时暂停时，这才有效。

解决方案：如果您已将轨道滑块设置为在鼠标悬停时暂停，则可以使用 jquery 触发特定幻灯片上的鼠标悬停事件。我基本上使用了一个计数器和 afterslidechange 函数将这一切放在一起。下面是代码，只需将其复制并粘贴到您的 html 文件或 Orbit 滑块所在的位置即可。

注意：下面的代码设置为四张幻灯片。循环后它会停在第一张幻灯片上。如果要更改幻灯片编号，只需更改 if 条件中的计数值即可。
您还需要为滑块中的每个图像添加链接，并为每个链接分配 ID。这是调用鼠标悬停事件所必需的。

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

Answer 2

我在搜索自己时发现了这一点： https://github.com/zurb/orbit/issues/49< /a>