1

我有一个滑块（使用 Liquid Slider），我对它进行了一些修改，以 (i) 创建一些颜色过渡和 (ii) 使用外部 prev/next 箭头，它们都在滑块的插件代码之外运行。

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

我试过使用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);
        });

滑块插件允许调用和回调，我试图sliding在动画发生时设置一个 var，以防止箭头在 var 为真时做任何事情，但不幸的是时机不对——设置的调用slidingto true 在单击处理程序执行之前没有这样做。

箭头的代码很简单：

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

已经有几个与类似问题相关的问题，但如前所述，我已经尝试了建议的解决方案，但运气不佳。任何帮助将非常感激 ：）

4

2 回答 2

0

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

$('.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自定义动画的回调（与滑块插件的动画具有相同的持续时间）意味着我可以控制箭头和其他选项卡何时能够执行转换。

于 2013-07-04T09:43:32.587 回答
0

测试一下：{没有看到相关的 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
});
于 2013-07-04T09:17:22.420 回答