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 秒后）。
我正在尝试修复此代码的一个问题。
好吧，我试图在更改任何按钮的样式后阻止单击任何按钮一秒钟，简单，如果单击任何按钮，您将无法在 1 秒内重新单击另一个按钮，而且如果幻灯片自动加载照片您不能通过在 1 秒内单击任何其他按钮来加载任何其他照片。

4

3 回答 3

5

我会在按钮中添加一个标志作为 css 类：

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

flag 是一个.enablecss 类，只有liwith.enable是可点击的。

该事件仅侦听clickon ul li.enable：

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

首先，所有按钮都应该是可点击的，所以.enable为 all 添加类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 回答
1

在函数中使用 setTimeout，其中 b 是要延迟的按钮的 id

function slow_button(b) {

    $('#' + b).attr("disabled", true);
    var t = setTimeout(function(){$('#' + b).removeAttr("disabled")}, 1000);
}
于 2013-08-25T03:44:11.997 回答