Jquery - slideshow buttons function code

jquery, slideshow

Solution

I would add a flag as css class to the button:

Working fiddle: http://jsfiddle.net/b_m_h/Jtec5/86/

The flag is a `.enable` css class, only `li` with `.enable` is clickable.

The event only listens for `click` on `ul li.enable`:

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

At first, all button should be clickable, so add `.enable` class for all `li`:

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

And add the mechanism to disable the `li` button and re-enable it after 1 second in the `traverseSlideShow()`:

function traverseSlideShow() {
    ...
    $('ul li').removeClass('enable');
    setTimeout(function(){
        $('ul li').addClass('enable');
    }, 1000);
}

Problem

I have this very simple slideshow here: fiddle Jquery codes: ``` $("#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); }); ``` As you can see there's three buttons, on clicking any button the slideshow automatically goes to the photo related with the button you click, and you can see the style of this button changes(on click and after passing 3 seconds). I have one problem with this code that I'm trying to fix. Well, I'm trying to prevent clicking any button for one second after any button's style is changed, simple, if you click any button you can not re click another button within 1 second, and as well, if the slideshow automatically loads a photo you can not load any other photo by clicking any other button within 1 second.

Original source