使用JQuery的Nivo滑块事件触发器

我已经在这里找到了很多问题的答案，它看起来是一个非常棒的社区！我目前正在为客户的项目使用Nivo滑块：

我在页面上还有3个图像按钮，使用JQuery在悬停时有动画。鼠标悬停时，按钮将更改其背景图像并稍微设置动画

我的客户希望此动画与Nivo滑块的最后一张幻灯片同步，这意味着动画将在最后一张幻灯片淡入时出现，并且动画将在滑块重新开始时停用

我有动画工作，但问题是，Nivo选项不允许您在特定幻灯片上触发事件，或者至少我无法理解

我正在使用更改前的Nivo选项来启动事件，并使用幻灯片结束来停用事件。问题是，“beforeChange”使动画在第一张幻灯片之后激活，而我不知道如何在最后一张幻灯片之前触发它

这是我正在使用的代码：

beforeChange: function(){ 
            $('a.shop').animate({"margin-top": "-15px"}, "400");
            $('a.shop').css("background", "url(images/shop_button_hov.png) top center no-repeat");
        },
        slideshowEnd: function(){
            $('a.shop').animate({"margin-top": "0px"}, "400");
            $('a.shop').css("background", "url(images/shop_button.png) top center no-repeat");
        }

我不是一个真正的JQuery专家，我可以使用它并做一些小的编辑，但我还远远不能实现自己的功能

---

任何帮助都将不胜感激

您可以使用以下代码获取当前幻灯片

$('#slider').data('nivo:vars').currentSlide;

这就是解决方案——它应该会起作用。我还没有测试过

beforeChange: function(){ 
    var totalSlides = $('#slider img').length;
    var currentSlide = $('#slider').data('nivo:vars').currentSlide;

    /* check if the slide to come is  the last slide */
    if(currentSlide == (totalSlides - 2))
    {
         $('a.shop').animate({"margin-top": "-15px"}, "400");
         $('a.shop').css("background", "url(images/shop_button_hov.png) top center no-  repeat");
     }

 },
 slideshowEnd: function(){
     $('a.shop').animate({"margin-top": "0px"}, "400");
     $('a.shop').css("background", "url(images/shop_button.png) top center no-repeat");
 }

也检查一下这个问题