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

orbit jquery slider pause on last slide

本文关键字：一张 幻灯片 最后 jquery 暂停 轨道      更新时间：2023-09-26

我使用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(){}

但是，唉，这个JS超出了我。

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

非常感谢你的时间和分享你的专业知识!Jon

弄清楚了，但是这只有在您将Orbit滑块设置为鼠标经过时暂停时才有效。

解决方案:如果你设置了轨道滑块暂停鼠标在你可以触发鼠标在特定幻灯片上的事件使用jquery。我基本上使用了一个计数器和afterslidechange功能来把这一切放在一起。下面是代码，只需复制并粘贴到你的html文件或轨道滑块存在的地方。

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

我在搜索自己时发现了这个:https://github.com/zurb/orbit/issues/49

相关文章：