Question

我已经多次在这里找到问题的答案，这似乎是一个非常好的社区！我目前正在为客户端项目使用Nivo滑块：

http://nivo.dev7studios.com/support/jquery-plugin-usage/

页面上还有3个图像按钮，使用JQuery悬停时有动画。在悬停时，按钮将改变它的背景图像并稍微有点动画。

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

我有动画工作，但问题是，Nivo选项不允许你在特定幻灯片上触发事件，或者至少不是我能弄明白。

我正在使用Nivo选项beforeChange来启动事件，而slideshowEnd则用于停用事件。问题是，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专家，我可以使用它并进行轻微的编辑，但我远远不能自己创作。

非常感谢任何帮助！

Answer 1

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

$('#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");
 }

同时检查此SO问题 Showing Slide Count with Nivo Slider

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

1 个答案: