Question

我有一个滑块（使用Liquid Slider），我已经入侵了一些（i）创建了一些颜色过渡，以及（ii）使用外部上一个/下一个箭头，它们都在滑块的插件代码之外运行。

我已经使用过渡和箭头来操作滑块，但即使滑块仍在幻灯片之间移动，我也无法阻止多次点击运行颜色过渡。

我尝试使用return false和e.stopImmediatePropagation()无效。

这是我的上一个/下一个箭头的代码：

$('.arrows a')
        .click(function(e) {
            var link = $(this);
            oldTab = $('.liquid-nav a.active'), newTab;
            oldTab.removeClass('active').prev().animate({opacity: 0}, 1000);
            if (link.hasClass('next')) {
                if (oldTab.parent().next().length) { // Test for looping slides
                    newTab = oldTab.parent().next().find('a');
                    newTabNum = theSlider.currentTab + 1;
                } else {
                    newTab = $('.tab1').find('a');
                    newTabNum = 0;
                }
                console.log( newTabNum );
                theSlider.setCurrent( newTabNum );
            } else {
                if (oldTab.parent().prev().length) { // Test for looping slides
                    newTab = oldTab.parent().prev().find('a');
                    newTabNum = theSlider.currentTab - 1;
                } else {
                    newTab = $('.tab' + theSlider.panelCount).find('a');
                    newTabNum = theSlider.panelCount - 1;
                }
                console.log( newTabNum );
                theSlider.setCurrent( newTabNum );
            }

            newTab.addClass('active').prev().animate({opacity: 1}, 1000);
            $('.liquid-nav').animate({borderTopColor: newTab.attr('data-colour')}, 1000);
            $('.arrows a').animate({backgroundColor: newTab.attr('data-colour')}, 1000);
        });

滑块插件允许调用和回调，我试图在动画发生时设置var sliding，以防止箭头在var为真时做任何事情，但不幸的是时间不是' t right - 将sliding设置为true的callforward在执行click处理程序之前没有执行此操作。

箭头的代码很简单：

<div class="arrows">
    <a href="javascript:;" class="prev"></a>
    <a href="javascript:;" class="next"></a>
</div>

已经有几个与类似问题有关的问题，但正如我所提到的，我已经尝试过没有太多运气的解决方案。任何帮助将不胜感激:)）

Answer 1

测试可能：{没有看到相关的HTML代码}

$('.arrows a')
    .click(function (e) {
    //use selector relative to your slider, by default class liquid-slide
    if ($('.liquid-slider').is(':animated')) return;
    var link = $(this);
    //... all other code here
});

Answer 2

我最终通过触发标签使用的click事件来管理它，而不是重复上一个/下一个箭头事件的代码（我从这里得到了这个想法Controlling a slideshow with an external button）。我还重新实现了sliding var，它似乎有效：

$('.arrows a').click(function() {
        if (!sliding) {
            //console.log(sliding);
            if ($(this).hasClass('next')) {
                newTab = (theSlider.currentTab === (theSlider.panelCount-1)) ? newTab = 1 : theSlider.currentTab + 2;
            } else {
                newTab = (theSlider.currentTab === 0) ? (theSlider.panelCount) : theSlider.currentTab;
            }
            //console.log(newTab);


            $('.liquid-nav .tab'+newTab+' a').click();
        }
    });

标签代码如下所示：

$('.liquid-nav a').each(function(i) {
        $(this)
            .click(function() {
                if (!$(this).hasClass('active') && !sliding) {
                    $('.liquid-nav a.active').removeClass('active').prev().animate({opacity: 0}, 1000);
                    $(this).addClass('active').prev().animate({opacity: 1}, 1000);
                    $('.liquid-nav').animate({borderTopColor: $(this).attr('data-colour')}, 1000);
                    sliding = true;
                    $('.arrows a').animate({backgroundColor: $(this).attr('data-colour')}, 1000, function() {
                        sliding = false;
                    });
                }
            })
            .prev().css('backgroundColor', $(this).attr('data-colour'));
    });

在自定义动画的回调中更改sliding（与滑块插件动画的持续时间相同）意味着我可以控制箭头和其他标签何时能够执行过渡。

在滑块动画执行时，防止对外部控件进行多次单击

2 个答案: