Question

我有一个滑块，我只希望它在浏览器低于640px时工作。

到目前为止，当浏览器的宽度超过640px时刷新浏览器，我的网格显示正确，如果我然后将浏览器设置为640px以下，则查询将启动并将网格转换为滑块，同样部分工作正常。

我的代码的问题是，当您使浏览器再次超过640px时，查询仍然在运行，我的网格仍然是一个滑块。

以下是代码：

var currentState = false;

function setSize() {

var state = $(window).width() < 640;
if (state != currentState) {
currentState = state;
if (state) {
    window.sliderInit = (function (window, document, undefined) {

        'use strict';

        // Feature Test
        if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) {

            // SELECTORS
            var sliders = document.querySelectorAll('[data-slider]');
            var mySwipe = Array;


            // EVENTS, LISTENERS, AND INITS

            // Add class to HTML element to activate conditional CSS
            document.documentElement.className += ' js-slider';

            // Activate all sliders
            Array.prototype.forEach.call(sliders, function (slider, index) {

                // SELECTORS

                var slideCount = slider.querySelector('[data-slider-count]'); // Slider count wrapper
                var slideNav = slider.querySelector('[data-slider-nav]'); // Slider nav wrapper


                // METHODS

                // Display count of slides
                var createSlideCount = function () {
                    // Variables
                    var slideTotal = mySwipe[index].getNumSlides();
                    var slideCurrent = mySwipe[index].getPos();

                    // Content
                    if ( slideCount !== null ) {
                        slideCount.innerHTML = slideCurrent + ' of ' + slideTotal;
                    }
                };

                // Display Slider navigation
                var createNavButtons = function () {
                    if ( slideNav !== null ) {
                        slideNav.innerHTML = '<a data-slider-nav-prev href="#">Previous</a> | <a data-slider-nav-next href="#">Next</a>';
                    }
                };

                // Stop YouTube and Vimeo videos from playing when leaving the slide
                var stopVideo = function () {
                    var currentSlide = mySwipe[index].getPos() - 1;
                    var iframe = slider.querySelector( '[data-index="' + currentSlide + '"] iframe');
                    var video = slider.querySelector( '[data-index="' + currentSlide + '"] video' );
                    if ( iframe !== null ) {
                        var iframeSrc = iframe.src;
                        iframe.src = iframeSrc;
                    }
                    if ( video !== null ) {
                        video.pause();
                    }
                };

                // Handle next button
                var handleNextBtn = function (event) {
                    event.preventDefault();
                    stopVideo();
                    mySwipe[index].next();
                };

                // Handle previous button
                var handlePrevBtn = function (event) {
                    event.preventDefault();
                    stopVideo();
                    mySwipe[index].prev();
                };

                // Handle keypress
                var handleKeypress = function (event) {
                    if ( event.keyCode == 37 ) {
                        mySwipe[index].prev();
                    }
                    if ( event.keyCode == 39) {
                        mySwipe[index].next();
                    }
                };


                // EVENTS, LISTENERS, AND INITS

                // Activate Slider
                mySwipe[index] = Swipe(slider, {
                    continuous: true,
                    callback: function(index, elem) {
                        createSlideCount(); // Update with new position on slide change
                    }
                });

                // Create slide count and nav
                createSlideCount();
                createNavButtons();
                var btnNext = slider.querySelector('[data-slider-nav-next]'); // Next slide button
                var btnPrev = slider.querySelector('[data-slider-nav-prev]'); // Previous slide button

                // Toggle Previous & Next Buttons
                if ( btnNext ) {
                    btnNext.addEventListener('click', handleNextBtn, false);
                }
                if ( btnPrev ) {
                    btnPrev.addEventListener('click', handlePrevBtn, false);
                }

                // Toggle Left & Right Keypress
                window.addEventListener('keydown', handleKeypress, false);

            });

        }

    })(window, document);



} else {
    $('.swipe-container').removeAttr('id');
    $('.swipe-container').unbind();

}
}
}

setSize();
$(window).on('resize', setSize);

Answer 1

你必须经常听窗口调整大小事件

window.onresize = function(event) {
    setSize();
};

或者如果您希望在调整大小完成后触发事件JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

杀死/停止jquery脚本

1 个答案: