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 秒ごとに「反転」させるクリックをシミュレートします。

ユーザーが実際にスライダーの矢印の1つをクリックすると、スライダーを停止したいのですが、「トリガーされた」クリックと実際のクリックを区別できないため、少し行き詰まります。

これを達成する方法について何か考えがありますか？ループ内のクリックをシミュレートせずにスライダーをアクティブにする方法を見つけているのではないでしょうか?

どうもありがとう

何か案が？

4

1 に答える 1

0

clearTimeout()参照 uid を保持し、関数を呼び出して、タイムアウトをクリアします。

(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 に答える