0

我正在使用一个名为 squareslider 的滑块。

找到附加的代码

    (function($){

    $('.square-slider').each(function(){
        var slider = $(this),
            slides = slider.find('.slide'),
            currentSlide = 0;

        slides.show();
        $(slides[currentSlide]).addClass('active');
        $('.next,.prev', slider).show();

        $('.prev', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide--;
            if(currentSlide < 0) currentSlide = slides.length - 1;
            $(slides[currentSlide]).addClass('active');
            return false;
        });

        $('.next', slider).on('click', function(){
            slides.removeClass('active');
            currentSlide++;
            if(currentSlide > slides.length - 1) currentSlide = 0;
            $(slides[currentSlide]).addClass('active');
            return false;
        });
    });


swapC()

function swapC() {
    $('.next').trigger("click");
    window.setTimeout(function() { swapC() }, 6000)
}

})(window.jQuery);

正如您所看到的，滑块是手动的（它会在单击具有 .prev 和 .next 类的 div 时滑动）所以我使用 setTimeout 来模拟使幻灯片每 6 秒“翻转”一次的单击。

当用户实际单击滑块的箭头之一时，我希望滑块停止，但因为无法区分“触发”单击与真正的单击，我有点卡住了。

你们对如何实现这一点有任何想法吗？也许找到一种方法来激活滑块而不模拟循环中的点击？

非常感谢各位

任何想法？

4

1 回答 1

0

通过保持引用 uid 并调用clearTimeout()函数来清除超时：

(function ($) {
    var timeout;
    $('.square-slider').each(function () {
        var slider = $(this),
            slides = slider.find('.slide'),
            currentSlide = 0;

        slides.show();
        $(slides[currentSlide]).addClass('active');
        $('.next,.prev', slider).show();

        $('.prev', slider).on('click', function () {
            slides.removeClass('active');
            currentSlide--;
            if (currentSlide < 0) currentSlide = slides.length - 1;
            $(slides[currentSlide]).addClass('active');
            return false;
        });

        $('.next', slider).on('click', function () {
            slides.removeClass('active');
            currentSlide++;
            if (currentSlide > slides.length - 1) currentSlide = 0;
            $(slides[currentSlide]).addClass('active');
            return false;
        });

        $('.stop', slider).on('click', function () {
            clearTimeout(timeout);
            return false;
        });
    });


    swapC()

    function swapC() {
        $('.next').trigger("click");
        timeout = window.setTimeout(swapC, 6000)
    }

})(window.jQuery);
于 2013-07-29T11:30:45.763 回答