Question

我想制作一个jquery滑块，一切正常但是当我再次点击它再次滑动时。我希望在完成一次滑动之后再下一次点击将触发。我怎么能这样做？

这是实时滑块，看看。 https://nur-alam.github.io/jQuerySlider/

这是我的jquery代码。

 (function($){


    var _gallery = $('#slider');
    _gallery.find('ul').attr('class','slides');
    _gallery.find('ul>li').attr('class','slide');
    var _slides = _gallery.find('.slides');
    var _slide = _gallery.find('.slide');


    _gallery.find('li:first').clone(true).appendTo(_gallery.find('ul'));
    _gallery.find('ul>li:first').addClass('active');

    totalSlides = _gallery.find('li').length;
    mainDivWidth = _gallery.outerWidth(true);
    eachSlideWidth = _gallery.find('li').outerWidth(true);
    totalWidth = totalSlides*eachSlideWidth;


    _gallery.find('ul').css('width',totalWidth);
    _gallery.find('ul>li').css('width',mainDivWidth);


    /*previous sliding function*/
    $('.prev_area').click(function(event){
        event.preventDefault();

        /*getting the index of active li element*/
        index = _gallery.find('.active').index();

        active = _gallery.find('.active');
        activeNext = active.prev();
        console.log(active);
        console.log(activeNext);

        /*if active li element is first li then go to last slide*/
        if(index == 0){
            activeNext = _gallery.find('ul>li').eq(totalSlides-2);
            activeNext.addClass('active');
            firstActive = _gallery.find('.active').eq(0);
            firstActive.removeClass('active');
            _slides.css('margin-left',-(totalWidth-eachSlideWidth));
            _slides.animate({'margin-left':'+='+mainDivWidth},750,'swing');
        }else{
            activeNext.addClass('active');
            active.removeClass('active');
            _slides.animate({'margin-left':'+='+mainDivWidth},750,'swing'); 
        }

    }); 



    /* next sliding function*/
    function nextSlideing(){

        /* getting the index of active li element*/
        index = _gallery.find('.active').index();

        active = _gallery.find('.active');
        activeNext = active.next();
        activeNext.addClass('active');
        firstActive = _gallery.find('.active').eq(0);
        firstActive.removeClass('active');

        _slides.animate({'margin-left':'-='+mainDivWidth},750,'swing',function(){
            /*if active index is last li element then add active class to first li element*/
            if(index===(totalSlides-2)){
                _gallery.find('ul>li').removeClass('active');
                _gallery.find('ul>li:first').addClass('active');
                _slides.css('margin-left',0);
            }
        });

    }


    /* next cliking event*/
    $(document).on('click','.next_area',function(event){
        event.preventDefault();
        nextSlideing();
    }); 

}(jQuery))

Answer 1

看起来你正在制作旋转木马。有一些非常好的旋转木马，但那不是你要求的。当你已经在动画中时，你可能想避免滑动。

- 编辑 -

基于我认为您在评论中所说的内容并重新考虑您的代码，isSliding需要在animate（）调用的完整回调中重置，而不是在nextSlideing [sic]函数结束时重置。您还需要在之前的幻灯片版本中执行类似的操作。

var isSliding = false;
/* next sliding function*/
function nextSlideing(){
  if (!isSliding) {
    isSliding = true;
    /* getting the index of active li element*/
    index = _gallery.find('.active').index();

    active = _gallery.find('.active');
    activeNext = active.next();
    activeNext.addClass('active');
    firstActive = _gallery.find('.active').eq(0);
    firstActive.removeClass('active');

    _slides.animate({'margin-left':'-='+mainDivWidth},750,'swing',function(){
        /*if active index is last li element then add active class to first li element*/
        if(index===(totalSlides-2)){
            _gallery.find('ul>li').removeClass('active');
            _gallery.find('ul>li:first').addClass('active');
            _slides.css('margin-left',0);
        }
        isSliding = false;
    });
  }
}

Answer 2

我用unbind mehtod来解决我的问题。

如何防止更多点击jquery滑块

2 个答案: