0

ここで何度も問題の解決策を見つけましたが、本当に素晴らしいコミュニティのようです! 現在、クライアントのプロジェクトに Nivo スライダーを使用しています。

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

JQueryを使用してホバー時にアニメーションを表示するページに3つの画像ボタンもあります。ホバーすると、ボタンの背景画像が変更され、わずかにアニメーション化されます。

クライアントは、このアニメーションを 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");
 }

Nivoスライダーでスライド数を表示するこのSO質問も確認してください

于 2012-06-23T06:18:23.360 に答える