Question

我正在寻找重启并停止自定义jQuery滑块的解决方案。

我已从此处插入自定义jQuery滑块： http://jsfiddle.net/mjaA3/1662/

我在同一页面上使用了三个幻灯片的滑块。 这三个幻灯片位于三个按钮内，在激活和显示时播放电影电影正在播放时，按钮内的幻灯片。

我希望这些按钮内的幻灯片重置（并停止），当这三个按钮中的另一个被激活时。

现在，幻灯片放映在按钮调用的函数内部启动点击。但它仍然需要重置，否则它会叠加（并且仍在播放）。

这是小提琴的缩短代码：

    var triggers = window.vorher.find('.fortschrittwrap .note');
    var images = window.vorher.find('.notificationwrap .ce_text');
    var lastElem = triggers.length-1;
    var target;

    triggers.first().addClass('active');
    images.hide().first().show();

    function sliderResponse(target) {
        images.fadeOut(300).eq(target).fadeIn(300);
        triggers.removeClass('active').eq(target).addClass('active');
    }

    triggers.click(function() {
        if ( !$(this).hasClass('active') ) {
            target = $(this).index();
            sliderResponse(target);
            resetTiming();
        }
    });



    function sliderTiming() {
        target = window.vorher.find('.fortschrittwrap .note.active').index();
        target === lastElem ? target = 0 : target = target+1;
        sliderResponse(target);
    }

    var timingRun = setInterval(function() { sliderTiming(); },5000);
    function resetTiming() {
        clearInterval(timingRun);
        timingRun = setInterval(function() { sliderTiming(); },5000);
    }

Answer 1

我能够通过附加到函数内部的clickEvent的clearInterval（timingRun）来做到这一点！

自定义jQuery Slider的停止和重启功能

1 个答案: