7

ここにこの非常に単純なスライドショーがあります:フィドル
Jquery コード:

$("#slideshow > div:gt(0)").hide();

var maxindex = $('#slideshow > div').length;

var index = 0
var interval = 3 * 1000; // 3 seconds
var timerJob = setInterval(traverseSlideShow, interval);

function traverseSlideShow() {
    console.log("current index: " + index);

    $('#slideshow > div')
        .stop()
        .fadeOut(1000);
    $('#slideshow > div').eq(index)
        .stop()
        .fadeIn(1000);

    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = (index < maxindex - 1) ? index + 1 : 0;

}

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

$(document).on('click', 'ul li', function () {
    index = $(this).index();
    traverseSlideShow();
    clearInterval(timerJob);
    timerJob = setInterval(traverseSlideShow, interval);
});

ご覧のとおり、3 つのボタンがあり、いずれかのボタンをクリックすると、クリックしたボタンに関連する写真にスライドショーが自動的に移動し、このボタンのスタイルが変化することがわかります (クリックして 3 秒経過した後)。
このコードには、修正しようとしている問題が 1 つあります。さて、ボタンのスタイルが変更された後、1秒間ボタンをクリックしないようにしようとしています。単純です。ボタンをクリックすると
、1秒以内に別のボタンを再クリックすることはできません。また、スライドショーが自動的に写真をロードする場合1 秒以内に他のボタンをクリックしても、他の写真を読み込むことはできません。

4

3 に答える 3

5

ボタンに css クラスとしてフラグを追加します。

作業フィドル: http://jsfiddle.net/b_m_h/Jtec5/86/

フラグは.enablecss クラスで、liクリック.enable可能です。

clickイベントはonのみをリッスンしul li.enableます。

...
$(document).on('click', 'ul li.enable', function () {
...

最初は、すべてのボタンをクリックできるようにする必要があるため.enable、すべてのクラスを追加しliます。

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + ' enable"></li>');
}

そして、liボタンを無効にして 1 秒後に再度有効にするメカニズムを追加しtraverseSlideShow()ます。

function traverseSlideShow() {
    ...
    $('ul li').removeClass('enable');
    setTimeout(function(){
        $('ul li').addClass('enable');
    }, 1000);
}
于 2013-08-27T04:13:20.433 に答える
2

これを試して、

(function(){
    $('button').on('click',function(){
    var $this=$(this);
            $this
                .attr('disabled','disabled');
                 setTimeout(function() {
                 $this.removeAttr('disabled');
                 }, 1000);
          });
     })();
于 2013-08-27T04:27:21.147 に答える