Javascript 动态观察jquery滑块在最后一张幻灯片上暂停

我正在使用Zurb轨道滑块：

我有一个使用以下设置的幻灯片：

$(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隐藏计时器（因为如果我关闭计时器，则帧不会前进，并且我隐藏了方向导航，因此…）：

不管怎样，到目前为止，一切都很适合我。我能想出的办法是让幻灯片停止在幻灯片中旋转，即在最后一张幻灯片上停止/不循环回到第一张幻灯片

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

afterSlideChange: function(){}

但是，唉，我无法理解这一点

如果你好奇的话：这是一个小实验，我使用jquery滑块创建一种停止运动动画，这是一种我一直在想的技术。它工作得很好，但永远的循环真的把事情搞砸了。：）

非常感谢您的时间和分享您的专业知识

---

Jon

我在搜索自己时发现了这一点：

找到了它，但是这只有在将“动态观察”滑块设置为鼠标悬停时才有效

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

注意：下面的代码是为四张幻灯片设置的。循环一圈后，它在第一张幻灯片上停止。如果要更改幻灯片编号，只需更改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>      

var计数=1；
$（窗口）。加载（函数（）
{
$（“#特色”）。动态观察(
{
更改：函数（）
{
计数++；
如果（计数=5）
{
$（“#链接”）.trigger（“鼠标悬停”）；
}
}               
});
});

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