5

できます！！！ http://jsfiddle.net/jupago/W6CkP/

このスレッドに基づく: Pause Nivo Slider

最初の画像で停止させることができました。

これが私のコードです。スライドショーの終了後にアニメーションも停止したいので、アニメーションを 2 回停止しています。

$(window).load(function() {
    $('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 500, // Slide transition speed
    pauseTime: 5000,
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true,  // Next & Prev navigation
    controlNav: false, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: false, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: 'previous', // Prev directionNav text
    nextText: 'next', // Next directionNav text
    randomStart: false, // Start on a random slide
    slideshowEnd: function(){           
          $('#slider').data('nivoslider').stop();
    setTimeout("$('#slider').data('nivoslider').start()",10000);
        }, // Triggers when last slide is shown
    });

    $('#slider').data('nivoslider').stop();
    setTimeout("$('#slider').data('nivoslider').start()",10000);
 });

元の投稿はこちら:

NIVO スライダー プラグインを使用していますが、スムーズに動作するようになりましたが、最初の画像が残りの画像よりも長く続く必要があります (最初の画像にはテキストが含まれています)。

ここで動作するフィドルを作成しました: jsfiddle.net/jupago/W6CkP

これにより、問題の理解がはるかに容易になります。参照用に、以前のフィドルのhtmlコードをまだ添付しています：

HTML:

<div class="slider-wrapper">
    <div id="slider" class="nivoSlider">
<img src="http://goo.gl/I4c65" />
<img src="http://goo.gl/acxBF"/>
<img src="http://goo.gl/GBzYF"/>
<img src="http://goo.gl/BC2EA" />
<img src="http://goo.gl/9Sd69" />
<img src="http://goo.gl/qOaZl"/>
<img src="http://goo.gl/btswq" />
    </div>
</div>

JS NIVO:

    $('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    animSpeed: 500, // Slide transition speed
    pauseTime: 5000, // How long each slide will show
    startSlide: 0, // Set starting Slide (0 index)
    directionNav: true,  // Next & Prev navigation
    controlNav: false, // 1,2,3... navigation
    controlNavThumbs: false, // Use thumbnails for Control Nav
    pauseOnHover: false, // Stop animation while hovering
    manualAdvance: false, // Force manual transitions
    prevText: 'next', // Prev directionNav text
    nextText: 'previous;', // Next directionNav text
    randomStart: false, // Start on a random slide
    beforeChange: function(){}, // Triggers before a slide transition
    afterChange: function(){}, // Triggers after a slide transition
    slideshowEnd: function(){}, // Triggers after all slides have been shown
    lastSlide: function(){}, // Triggers when last slide is shown
    afterLoad: function(){} // Triggers when slider has loaded
});
4

3 に答える 3

1

私はこれを試していないので、うまくいくかどうかは保証できませんが、試してみることのできることの 1 つは、実際にpauseTimeを定数ではなく関数に設定すること5000です。どの画像にあるかを判断し、それが目的の画像である場合は時間を のよう8000に設定し、そうでない場合は に設定し5000ます。

繰り返しますが、私はこれをテストしておらず、動作することを保証することもできません. ただし、そうであれば、かなりの追加の柔軟性が得られます。


これを実装しようとする場合に使用するコードは次のとおりです。

...
pauseTime: function() {
    if ($("#slider").data("nivo:vars").currentSlide == 0) {
        return 8000;
    }
    return 5000;
},
...

または、これが で機能しない場合は、次のように、ほぼ同じものを別のオプションにpauseTime入れてみます。beforeChange

...
beforeChange: function() {
    if ($("#slider").data("nivo:vars").currentSlide == 0) {
        $("#slider").delay(3000);
    }
    return;
},
...

重要な注意:特にスライダーの開始インデックスを変更する予定がある場合は....currentSlide == 0)、上記のサンプルの を Nivo スライダーのオプションのアクセサーに実際に置き換える必要があります。startSlideアクセサーが何であるかは覚えていませんが、次のようになると想像します。

....currentSlide == settings.startSlide)

ここsettingsで、Nivo が使用する設定変数の名前です。


アップデート

コメントで言及したエラーに基づいて、次の提案は、同じ 2 つの解決策をもう一度試すことですが、今回はsetting.startSlideをに置き換え0ます。それがうまくいかない場合は (そうあるべきですが)、最初からやり直す必要があります。動作する場合は、 を に置き換えてみて0くださいthis.startSlide。これがどのように機能するか教えてください。

于 2013-04-12T18:26:09.920 に答える
0

次のようなものを試すことができます：

 $(window).load(function() {
   var waited = false;
   $('#slider').nivoSlider({
    //...
    beforeChange: function(){
        if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide
            //wait a little longer
            $('#slider').data('nivoslider').stop();
            setTimeout(function(){
                 waited = true;
                 $('#slider').data('nivoslider').start();
            }, 2000); //2 seconds
        } else {
            waited = false;
        }
    },
    //...
    });
});

編集: settimeout が本当に必要かどうかはわかりません。おそらくreturn falseそれを行うだけです。

 $(window).load(function() {
   var waited = false;
   $('#slider').nivoSlider({
    //...
    beforeChange: function(){
        if(!waited && ($('#slider').data("nivo:vars").currentSlide == 0)) { //first slide
            //wait a little longer
            return false;
        } else {
            waited = false;
        }
    },
    //...
    });
});
于 2013-04-12T18:22:53.837 に答える