0

我在这里多次找到问题的答案，这似乎是一个非常棒的社区！我目前正在为客户的项目使用 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 专家，我可以使用它并进行轻微的编辑，但我远不能制作自己的功能。

任何帮助将不胜感激！

4

1 回答 1

0

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

$('#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 Question Showing Slide Count with Nivo Slider

于 2012-06-23T06:18:23.360 回答