Jquery - 幻灯片按钮功能代码

Question

我在这里有一个非常简单的幻灯片:小提琴
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秒后).
我有一个问题,我正在尝试修复此代码.
好吧,我想任何按钮的样式更改后,简单的防止点击一秒任何按钮,如果你点击任何按钮,你不能再点击在1秒内的另一个按钮,并为好,如果幻灯片自动加载照片您无法在1秒内点击任何其他按钮加载任何其他照片.

Answer 1

我会在按钮上添加一个标志作为css类:

工作小提琴:http://jsfiddle.net/b_m_h/Jtec5/86/

该标志是一个.enableCSS类,只li用.enable点击.

该事件仅监听click于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);
}