Nivo滑塊事件觸發器與JQuery

我已經多次在這裏找到問題的答案，它看起來像一個非常棒的社區！我目前使用的NIVO滑塊用於客戶端的項目：Nivo滑塊事件觸發器與JQuery

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

我也有有使用JQuery懸停動畫在頁面上3圖像按鈕。懸停時，該按鈕將更改其背景圖片並略帶動畫效果。

我的客戶希望此動畫與Nivo滑塊的最後一張幻燈片同步，這意味着動畫將在最後一張幻燈片淡入時發生，並且當滑塊重新開始時動畫將停用。

我有動畫工作，但問題是，Nivo選項不會允許您觸發特定幻燈片上的事件，或者至少不是我能弄明白的。

我正在使用nVo選項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的專家，我可以用它做出輕微的修改，但我很遠不能使自己的功能。

任何幫助將不勝感激！

來源

2012-04-24 mgmuranaka

您可以使用下面的代碼來獲取當前幻燈片

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

同時檢查這太問題 Showing Slide Count with Nivo Slider

來源

2012-06-23 06:18:23 krishnan

Nivo滑塊事件觸發器與JQuery

回答

相關問題